Advanced Search

Results 1 to 4 of 4

Thread: onMouseOver problem - photoshop html

  1. #1
    Join Date
    Aug 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default onMouseOver problem - photoshop html

    I am currently messing around with the html put out by photoshop CS3.

    I am attempting to create a menu from a sliced image. When areas of the image are MouseOvered, I need a different image to replace it.

    Even though i'm changing the image source, only the first picture on the menu changes.

    Below is a section of the html:

    Code:
    <tr>	
    			<td onMouseOver="document.getElementById('hide').style.display='none';document.getElementById('show').style.display='inline';" onMouseOut="document.getElementById('show').style.display='none';document.getElementById('hide').style.display='inline';">
    			<img src="images/smiths_04.gif" width="105" height="38" alt="" id="hide"><img src="images/smiths_04a.gif" id="show" style="display:none" /></td>
    		        <td>
    			<img src="images/Smiths_05.gif" width="16" height="38" alt=""></td>
    			<td onMouseOver="document.getElementById('hide').style.display='none';document.getElementById('show').style.display='inline';" onMouseOut="document.getElementById('show').style.display='none';document.getElementById('hide').style.display='inline';">
    			<img src="images/smiths_06.gif" width="195" height="38" alt="" id="hide"><img src="images/smiths_06a.gif" id="show" style="display:none" /></td>
    The site can be viewed here....Hover over the first two menu items to see what I mean.

    Thanks in advance!

  2. #2
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    You have to have different ids on each element in order for that javascript to work right. Try appending an incrementing number to the end of each id (ex: show1, hide1, show2, hide2, etc). Be sure to change this part as well to point to the correct ids:

    Code:
    document.getElementById('hide').style.display='none';document.getElementById('show').style.display='inline';
    Hope this helps.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  3. #3
    Join Date
    Aug 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Many thanks!!

    Such a simple solution....serves me right for doing web design at 4am!

  4. #4
    Join Date
    Aug 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    hmm, works perfectly offline, but is becoming distorted when viewed online.

    Any ideas?

    Visit Site

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
  •