SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with jQuery navigation menu to show an image

    Hello,

    I'm trying to include a navigation menu where the viewer hovers over the link such as Main or Home and somewhere else in the page it display an image.

    Similar to this : http://tutorialzine.com/2010/01/half...nu-jquery-css/

    But instead of pixels, I would just like images to be displayed.

    example.gif

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why use jquery when you can do it with less code using just plain javascript.?

    In any case, post the code you have so far and we can try to help you get it working.

  3. #3
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok well, I'm trying javascript to do this and I'm able to get the image showing. But since this is involving images...I would like the link text to change colors. Of course if this wasn't an image I'll use CSS to change the font color. But because I want to keep this certain font that isn't common, I'm sticking to an image of the word (in this case "main"). Is it possible to swap the word image (from black to blue) while using this show command at the same time?

    my current code is this:

    Code:
    <script language="Javascript">
    <!--
    function ShowPicture(id,Source) {
    if (Source=="1"){
    if (document.layers) document.layers[''+id+''].visibility = "show"
    else if (document.all) document.all[''+id+''].style.visibility = "visible"
    else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
    }
    else
    if (Source=="0"){
    if (document.layers) document.layers[''+id+''].visibility = "hide"
    else if (document.all) document.all[''+id+''].style.visibility = "hidden"
    else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
    }
    }
    //-->
    </script>
    Code:
    <a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)"><img src="main.png"></a>
    <div id="Style"><img src="house.png"></div>


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
  •