www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Dynamically change onmouseout value on image rollover?

Hybrid View

  1. #1
    Join Date
    Jun 2011
    Posts
    3

    resolved [RESOLVED] 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:

    <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
    Join Date
    Dec 2010
    Posts
    207
    I would forget about trying to swap event handlers. I think the simplest fix for this is simply to have a permanent variable called switchPos initially set to 1, to represent the default switch position.
    Each onclick handler sets switchPos to 1, 2 or 3 as appropriate then loads the appropriate image then .
    Then the mouseover/out handlers can read the value of switchPos to decide whether or not to swap anything.


    Q: I found this code...
    A: Then find its author.

  3. #3
    Join Date
    Jun 2011
    Posts
    3
    Thank you clueful! I will try this and repost how it turns out. ;D

  4. #4
    Join Date
    Jun 2011
    Posts
    3
    PROBLEM SOLVED! WOOOOOOOOOOOOO

    thanks so much, it set my mind in a clear path to victory!

    also the ff and ie issues ended being that my usemap attribute had no hashtag, now with the hashtag work perfectly!

    here's the ending code:

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles