SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

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

    Dynamically change onmouseout value on image rollover?

    Hello all! I'm a beginner to javascript and having trouble specifically with onmouseout, onmouseover, and onclick used on areas in an image map. I'm trying to replicate the interactive hearing aid sound demonstration that can be seen on contactainc.com homepage but program it with javascript instead of flash. In the end of countless hours of research, frustration, and browser incompatibility (only chrome will actually change the image, ie nor firefox do anything except display one image), I have come here for help.

    Here's my guidelines to help you understand...

    The hearing aid has three switches.
    An image is created for each switch being selected. (3 images)
    The first switch is the off button or stops any sound playing when selected.
    The second switch upon selection plays a sound file of somebody talking
    The third switch upon selection plays a sound file of the same person talking but also with background noise.
    A polygon area has been created for each switch as part of an image map. (3 areas)

    When a switch is selected (let's say switch 1), the other switch areas upon mouse rollover are highlighted in yellow (either switch area 2 or switch area 3) but the switch that was selected (switch 1) doesnt change upon mouse rollover. So this had me create 2 more images per switch displaying the switch selected and the two other areas highlighted. In total this is 9 images.(3 imaged per switch + (3switches * 2 switch areas highlighted) = 9).

    The image names are as followed HearingAid(switch number)(nothing,a, or b) corresponding which switch is highlighted; a being bottom most switch area different than switch that's selected and b being top most switch area. So they are HearingAid1.png, HearingAid1a.png, HearingAid1b.png HearingAid2.png, HearingAid2a.png, HearingAid2b.png, HearingAid3.png, HearingAid3a.png, HearingAid3b.png.

    The original image will change to the appropriate image out of the 9 images I created based upon left clicking an area to select the switch and mousing over other switches which are then highlighted.

    My first problems from my first few attempts was that when I selected a different switch from the original off switch, my onmouseout for all switch areas was programmed to revert to the original off switch image and not the image I selected. So I thought I needed to dynamically change those attribute values to new ones every time I selected a new switch. I couldn't find anything in my research that would help me since I tried a lot of things and saw them all fail when testing them out.

    My latest attempt I thought had the most potential but it seems like the onclick attribute is working at all. I can't figure out why either.

    All help is appreciated!

    Here's my latest code:

    Code:
    <head>
    <script type="text/javascript">
    document.getElementById('demo').src = "HearingAid1.png";
    
    function onclick1() {
            document.getElementById('demo').src = "HearingAid1.png";
    		document.getElementById("area1").onmouseover = 				   "javascript:document.getElementById('demo').src = 'HearingAid1.png'";
    		document.getElementById("area1").onmouseout = "javascript:document.getElementById('demo').src = 'HearingAid1.png'";
    		document.getElementById("area2").onmouseover = "javascript:document.getElementById('demo').src = 'HearingAid1a.png'";
    		document.getElementById("area2").onmouseout = "javascript:document.getElementById('demo').src = 'HearingAid1.png'";
    		document.getElementById("area3").onmouseover = "javascript:document.getElementById('demo').src = 'HearingAid1b.png'";
    		document.getElementById("area3").onmouseout = "javascript:document.getElementById('demo').src = 'HearingAid1.png'";
      		}
    function onclick2() {
    		document.getElementById('demo').src = "HearingAid2.png";
      		document.getElementById("area1").onmouseover = "javascript:document.getElementById("demo").src = 'HearingAid2a.png'";
    		document.getElementById("area1").onmouseout = "javascript:document.getElementById("demo").src = 'HearingAid2.png'";
    		document.getElementById("area2").onmouseover = "javascript:document.getElementById("demo").src = 'HearingAid2.png'";
    		document.getElementById("area2").onmouseout = "javascript:document.getElementById("demo").src = 'HearingAid2.png'";
    		document.getElementById("area3").onmouseover = "javascript:document.getElementById("demo").src = 'HearingAid2b.png'";
    		document.getElementById("area3").onmouseout = "javascript:document.getElementById("demo").src = 'HearingAid2.png'";
      		}
    function onclick3() {
    		document.getElementById('demo').src = "HearingAid3.png";
      		document.getElementById("area1").onmouseover = "javascript:document.getElementById('demo').src = 'HearingAid3a.png'";
    		document.getElementById("area1").onmouseout = "javascript:document.getElementById('demo').src = 'HearingAid3.png'";
    		document.getElementById("area2").onmouseover = "javascript:document.getElementById('demo').src = 'HearingAid3b.png'";
    		document.getElementById("area2").onmouseout = "javascript:document.getElementById('demo').src = 'HearingAid3.png'";
    		document.getElementById("area3").onmouseover = "javascript:document.getElementById('demo').src = 'HearingAid3.png'";
    		document.getElementById("area3").onmouseout = "javascript:document.getElementById('demo').src = 'HearingAid3.png'";
      		}
    	
    </script>
    </head>
    <body>
    
    <map name="mapsy">
    
    <area shape="polygon" id="area1" coords="355,167,354,188,356,210,372,210,369,187,368,167" onclick="javascript:onclick1()" onmouseover="javascript:document.getElementById('demo').src = 'HearingAid1.png'" onmouseout="javascript:document.getElementById('demo').src = 'HearingAid1.png'">
    
    <area shape="polygon" id="area2" coords="357,115,354,139,354,165,368,165,369,142,371,118" onclick="javascript:onclick2()" onmouseover="javascript:document.getElementById('demo').src = 'HearingAid1a.png'" onmouseout="javascript:document.getElementById('demo').src = 'HearingAid1.png'">
    
    <area shape="polygon" id="area3" coords="370,66,363,88,357,114,372,117,382,67" onclick="javascript:onclick3()" onmouseover="javascript:document.getElementById('demo').src = 'HearingAid1b.png'" onmouseout="javascript:document.getElementById('demo').src = 'HearingAid1.png'">
    </map> 
    <img src="HearingAid1.png" id="demo" usemap="mapsy" border="0">
    </body>
    Lots of thanks in advance!

  2. #2
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Make image objects

    Try doing something like this site suggests: http://www.quackit.com/javascript/image_rollovers.cfm

    They have a "name" property on the image, and usemap should be: usemap=#mapsy
    (add pound sign in the front of it). Say we call the name "demo", for consistency. Use a function call instead of doing all of the changing in the onmouseover/out calls.

    So if you do onMouseOver = switchImg('1')

    function switchImg(num) {
    var img = new Image;
    img.src = "HearingAid" + num + ".png";
    document["demo"].src = img.src;
    }


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
  •