SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot DarkMonkey's Avatar
    Join Date
    Apr 2001
    Location
    uk
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rollover links with acompanying image mouseover.

    Basically I want a litlle image of a 'light' or a dark image to appear lit up when the corosponding link is rolled over.

    () Links
    () Home
    () News

    So () becomes () When I roll over home.

    I would like it to be efficient too. If possibly I don't want a sepperate piece of code for every link. The image is obviously the same for all so I'd like for the effect to occur simply via some kind of ID system. which the link and the image share.

    Hopefully you get what I'm saying. I dont' really know how to achieve this and I certainly don't know how to achieve it efficiently and properly. I'm rusty on javascript so any help would be great. Ta.

  2. #2
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this...it doesn't use an image just simple HTML but it will help you figure it out.

    var changePoint
    function changePrompt(value){
    changePoint="bob"+value
    document.getElementById(changePoint).innerHTML="<b>()</b>"
    }
    function changeBack(value){
    changePoint="bob"+value
    document.getElementById(changePoint).innerHTML="()"
    }

    that goes into the Head section under script (in case you didn't realize)

    <span id="bob1">
    ()
    </span>
    <span onmouseOver="changePrompt(1)" onmouseout="changeBack(1)">
    Help<br>
    </span >
    <span id="bob2">()</span>
    <span onmouseOver="changePrompt(2)" onmouseout="changeBack(2)">
    About.Me
    </span>

    Put that into your body
    If you plan on using an image remember to cache them all so that the rollover works well on a bandwidth.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  3. #3
    SitePoint Zealot DarkMonkey's Avatar
    Join Date
    Apr 2001
    Location
    uk
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks lots
    Don't suppose somebody could jog my memory about caching images with javascript... Something like

    Image = New Image('blah.jpg');

    but I can't remember


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
  •