SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: mouseover image

  1. #1
    SitePoint Member
    Join Date
    Feb 2003
    Location
    virginia
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    mouseover image

    Been looking through hotscripts.com but their is just so much info their I am having a hard time finding one I need. Basically, by my links I want a small picture ( stuff like [ )and when you hover over the link the image changes (like [ to []) and then changes back.

  2. #2
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script type="text/javascript">
    
    function swapMe(id,imgSrc) {
    document.getElementById(id).src = imgSrc ;
    }
    
    </script>
    
    ...
    
    <img src="image_off.gif" onmouseover="swapMe(this.id,'image_on.gif')" onmouseout="swapMe(this.id,'image_off.gif')" id="thisImage" />

    You could equally use the image's own id (nested in apostrophes) in place of this.id.
    I've just used this.id in this case purely to be lazy, so I/you don't even have to look at the image's own id.

    The above function can be used to change images other than the one being moused over.
    Simply change this.id for the id of any image on the page:

    Code:
    ...</script>
    
    ...
    
    <img src="thatimage_off.gif" id="thatImage" />
    
    ..
    
    
    <img src="image_off.gif" onmouseover="swapMe('thatImage','thatimage_on.gif')" onmouseout="swapMe('thatImage','thatimage_off.gif')" id="thisImage" />
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  3. #3
    SitePoint Member
    Join Date
    Feb 2003
    Location
    virginia
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, im about to try this out, but i think you interpreted me wrong. i want the image beside a text link to appear when you hover over the text link, then dissapear when you move away.


    text link (not hovering
    [img] text link (hovering)

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just nest the text in a pair of <div>...</div> tags and place the onmouseover and onmouseout evenst in the opening <div> tag.

    Code:
    <div onmouseover="swapMe('thatImage','thatimage_on.gif')" onmouseout="swapMe('thatImage','thatimage_off.gif')">
    
    Your text here
    
    </div>

    Do you wish the image to take up no space by default and then appear (and take up space) when the cursor is over the text?
    Depending on your layout, this could cause things to shift about untidily when the image appears and disappears.


    Or do you simply want to have a blank space where an image appears when the cursor is over the text?

    If so, then simply use a blank gif for the starting image (thatimage_off.gif in my example) and use the onmouseover/onmouseout events in the <div> tag to swap the blank image with the real image (and vice versa).
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  5. #5
    SitePoint Member
    Join Date
    Feb 2003
    Location
    virginia
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot, my site is comming along well.


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
  •