Results 1 to 8 of 8

Thread: Dropdown Menu on Image

  1. #1
    Join Date
    Jun 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Dropdown Menu on Image

    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.
    Last edited by Javaman; 06-28-2012 at 05:15 PM.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

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

  3. #3
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    If I'm right, this might help you.
    Bernie
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  4. #4
    Join Date
    Jul 2012
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Thumbs up

    Quote Originally Posted by Javaman View Post
    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...

  5. #5
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

    Quote Originally Posted by creative1977 View Post
    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>

  6. #6
    Join Date
    Jul 2012
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

    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 <!--<img id="imgem" src="new_images/enable_icon.gif" width="9" height="9"/>&nbsp;&nbsp;--> 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> 
    Last edited by ApacheTech; 07-09-2012 at 10:53 AM.

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

    creative1977 (07-09-2012)

  9. #8
    Join Date
    Jul 2012
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ApacheTech View Post
    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 <!--<img id="imgem" src="new_images/enable_icon.gif" width="9" height="9"/>&nbsp;&nbsp;--> 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?

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •