Dropdown Menu on Image

**Javaman** · 06-28-2012, 04:45 PM

Hi everyone,
Is it possible to create an image with a dropdown menu when a link is clicked. For instance suppose I click on a link that says Mustang V6 and a picture of Ford Mustang shows up. Is there any way to put a dropdown menu in the bottom portion of this image? I would like to put information related to the vehicle in the dropdown menu. Thanks in advance for your reply.

**Nile** · 06-29-2012, 02:57 AM

Do you have a live example of what you want? Maybe an example of a website that already does this?

**bernie1227** · 06-29-2012, 04:29 AM

If I'm right, this might help you.
Bernie

**creative1977** · 07-09-2012, 08:07 AM

Originally Posted by Javaman

Hi everyone,
Is it possible to create an image with a dropdown menu when a link is clicked. For instance suppose I click on a link that says Mustang V6 and a picture of Ford Mustang shows up. Is there any way to put a dropdown menu in the bottom portion of this image? I would like to put information related to the vehicle in the dropdown menu. Thanks in advance for your reply.

Hi Javaman,

1. Please find the attached "01.txt" file.
2. ReName it as "01.html".
3. Publish the file in your Web Browser.
4. Click that "Mustang V6"

Hope this helps...

**ApacheTech** · 07-09-2012, 09:13 AM

Originally Posted by creative1977

Hi Javaman,

1. Please find the attached "01.txt" file.
2. ReName it as "01.html".
3. Publish the file in your Web Browser.
4. Click that "Mustang V6"

Hope this helps...

Your code doesn't work. I could tell just by looking at the source that it wouldn't. One tip though... cursor: hand; is now an invalid CSS value; use cursor: pointer; instead.

Here's my interpretation:

HTML Code:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>DropDown on Click</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // Hide all dropdowns initially.
        $('.dropdown').hide();
        
        // Bind click event
        $('.image-holder').click(function() {   
            $(this).children('.dropdown').slideToggle('slow');
        });
    });
</script>

<style type="text/css">
    *, html
    {
        padding: 0;
        margin: 0;
    }

    .image-holder
    {
        display: inline-block;
        width: 20%;
        padding: 10px;
        vertical-align: top;
    }

    .thumbnail
    {
        height: 200px;
    }
</style>
</head>

<body>
<div class="image-holder">
    <p class="title">Mustang V6</p>
    <img class="thumbnail" src="http://1.cdn.lib.americanmuscle.com/files/05-torch-red-black-mustang-v6-1.jpg" title="Mustang V6" alt="Mustang V6" />
    <div class="dropdown">
        <p class="description"><strong>Name: </strong>Ford Mustang V6</p>
        <p class="description"><strong>Year: </strong>1995</p>
        <p class="description"><strong>Colour: </strong>Torch Red</p>
        <p class="description"><strong>Rims: </strong>18x9 Black Bullitt Wheels</p>
        <p class="description"><strong>Tyres: </strong>240/45 R18 Cooper Zeon Tires</p>
    </div>
</div>

<div class="image-holder">
    <p class="title">Mustang V6</p>
    <img class="thumbnail" src="http://1.cdn.lib.americanmuscle.com/files/05-torch-red-black-mustang-v6-1.jpg" title="Mustang V6" alt="Mustang V6" />
    <div class="dropdown">
        <p class="description"><strong>Name: </strong>Ford Mustang V6</p>
        <p class="description"><strong>Year: </strong>1995</p>
        <p class="description"><strong>Colour: </strong>Torch Red</p>
        <p class="description"><strong>Rims: </strong>18x9 Black Bullitt Wheels</p>
        <p class="description"><strong>Tyres: </strong>240/45 R18 Cooper Zeon Tires</p>
    </div>
</div>

<div class="image-holder">
    <p class="title">Mustang V6</p>
    <img class="thumbnail" src="http://1.cdn.lib.americanmuscle.com/files/05-torch-red-black-mustang-v6-1.jpg" title="Mustang V6" alt="Mustang V6" />
    <div class="dropdown">
        <p class="description"><strong>Name: </strong>Ford Mustang V6</p>
        <p class="description"><strong>Year: </strong>1995</p>
        <p class="description"><strong>Colour: </strong>Torch Red</p>
        <p class="description"><strong>Rims: </strong>18x9 Black Bullitt Wheels</p>
        <p class="description"><strong>Tyres: </strong>240/45 R18 Cooper Zeon Tires</p>
    </div>
</div>
</body>
</html>

**creative1977** · 07-09-2012, 09:35 AM

Hi ApacheTech,

My code is working in my IE Browser. Please do not just look at the code. Please re-name the file as .html and try publish it on IE Browser. It's working in my IE Browser. Thanks for your tip about "cursor: pointer;". By the way your interpretation (code) is not working as per Javaman's requirement.

**ApacheTech** · 07-09-2012, 09:53 AM

Your code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>DropDown on Click</title>

<script type="text/javascript">
_uacct = "UA-1928984-2";
urchinTracker();


function onMouseOverFn(sid, tid)
{
      sid.style.cursor = tid;
}

function onMouseOutFn(sid)
{
     sid.style.cursor = 'default';
}

function showEM(obj)
{

	
	if(document.getElementById('EM').style.display == 'none' || document.getElementById('EM').style.display == '' )
	{
		
		document.getElementById('EM').style.display="inline";
		document.getElementById('imgem').src="new_images/bullet_02-down.gif";
		document.getElementById('imgem').width = 9;
		document.getElementById('imgem').height= 9;
	}
	else 
	{
		
		document.getElementById('imgem').src="new_images/enable_icon.gif"
		document.getElementById('EM').style.display = 'none'
		document.getElementById('imgem').width = 9;
		document.getElementById('imgem').height= 9;

	}
	
}

</script>


<style type="text/css">

.testing{				
				display: none;
}

</style>

</head>

<body>
<div><label onclick="showEM(this)" onmouseover="onMouseOverFn(this,'hand');" onmouseout="onMouseOutFn(this);" id="imgem"><!--<img id="imgem" src="new_images/enable_icon.gif" width="9" height="9"/>&nbsp;&nbsp;-->Mustang V6</label></div>
<div id="EM" class="testing"><img src="angelina_jolie_13.jpg" width="400" /></div>
</body>

</html>

1. The images you linked to are on your own computer, nothing shows up for anyone else in the world.
2. I (deliberately) don't have IE installed on this machine, or any other Windows machine I own.
3. The element "#imgem" is a <label> tag, yet, you're trying to alter it's src attribute, which it doesn't possess.
4. The <label> tag itself is not a self-sustaining tag, it's supposed to be used in conjunction with another element using it's for attribute.
5. The code  is in HTML comment tags, and therefore will not do anything within the page and cannot be modified using Javascript.
6. When working with heights and widths, you should specify units. Your .width = 9; should read .width = '9px';. Note the encapsulated string here, as the CSS will read that as nine pixels, rather than an arbitrary 9, which can cause different results in different browsers.
7. There's no need to add a .txt attachment and give instructions to change filenames, just place the source code within [html][/html] or [php][/php] tags depending on what language you are using.
8. You should always try to make your code as cross-browser compatible as possible. Simply saying "it works in IE, use that" is neither helpful, nor productive.
9. Javaman still hasn't given a full description of what he is after. My working example can either act as a starting block or he can say yes or no to whether that is the kind of thing he is after.
10. My example may not work for you if you are using it offline. I've used the preferred protocol-less method for attaching the JQuery script. To make it work offline:

FIND:

PHP Code:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

REPLACE WITH:

PHP Code:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

**creative1977** · 07-09-2012, 03:36 PM

Originally Posted by ApacheTech

Your code:

1. The images you linked to are on your own computer, nothing shows up for anyone else in the world.
2. I (deliberately) don't have IE installed on this machine, or any other Windows machine I own.
3. The element "#imgem" is a <label> tag, yet, you're trying to alter it's src attribute, which it doesn't possess.
4. The <label> tag itself is not a self-sustaining tag, it's supposed to be used in conjunction with another element using it's for attribute.
5. The code  is in HTML comment tags, and therefore will not do anything within the page and cannot be modified using Javascript.
6. When working with heights and widths, you should specify units. Your .width = 9; should read .width = '9px';. Note the encapsulated string here, as the CSS will read that as nine pixels, rather than an arbitrary 9, which can cause different results in different browsers.
7. There's no need to add a .txt attachment and give instructions to change filenames, just place the source code within [html][/html] or [php][/php] tags depending on what language you are using.
8. You should always try to make your code as cross-browser compatible as possible. Simply saying "it works in IE, use that" is neither helpful, nor productive.
9. Javaman still hasn't given a full description of what he is after. My working example can either act as a starting block or he can say yes or no to whether that is the kind of thing he is after.
10. My example may not work for you if you are using it offline. I've used the preferred protocol-less method for attaching the JQuery script. To make it work offline:

Hi ApacheTech,

Thanks a lot for correcting some of my errors.

Could you please use the following link:

http://www.jurassicpunk.com/stars/an...a_jolie_13.jpg

... in src="" inside the <img />? By the way can you get into my Screen via TeamViewer for few minutes?

Thread: Dropdown Menu on Image

Thread Tools

Search Thread

Dropdown Menu on Image

The Following User Says Thank You to ApacheTech For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions