chordsoflife Posted November 21, 2008 Share Posted November 21, 2008 Why is this not working? <div class="block"> <h2><a href="#" onmouseover="document.getElementById("blockTR").src = 'img/category_music.jpg';" onmouseout="document.getElementById("blockTR").src = 'img/category_music_bw.jpg';">Music</a></h2> <img src="img/category_music_bw.jpg" id="blockTR" class="blockHd" alt="Music" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam cursus. Ut condimentum magna quis diam ultricies bibendum. Fusce massa magna, vestibulum suscipit, ullamcorper id, pharetra pharetra, libero. Quisque turpis ipsum, adipiscing sed, aliquet et, scelerisque molestie, est. Aliquam auctor massa non diam. Vivamus vel nunc. Suspendisse ut dolor vitae lorem elementum mattis. Duis malesuada lectus nec neque sollicitudin tempus. Quisque felis risus, faucibus at, accumsan eget, commodo vitae, pede. In porta. Aliquam commodo imperdiet felis. </p> </div> Thanks! (is there a better way to do this?) Quote Link to comment https://forums.phpfreaks.com/topic/133660-simple-problem/ Share on other sites More sharing options...
KevinM1 Posted November 21, 2008 Share Posted November 21, 2008 Why is this not working? <div class="block"> <h2><a href="#" onmouseover="document.getElementById("blockTR").src = 'img/category_music.jpg';" onmouseout="document.getElementById("blockTR").src = 'img/category_music_bw.jpg';">Music</a></h2> <img src="img/category_music_bw.jpg" id="blockTR" class="blockHd" alt="Music" /> <p>Lorem ipsum ... </p> </div> Thanks! (is there a better way to do this?) Yes, there is a better way to do it. Try: <html> <head> <title>blah</title> <script type="text/javascript"> window.onload = function() { var toggle = document.getElementById('toggle'); var myImage = document.getElementById('blockTR'); toggle.onmouseover = function() { myImage.src = 'img/category_music.jpg'; } toggle.onmouseout = function() { myImage.src = 'img/category_music_bw.jpg'; } } </script> </head> <body> <div class="block"> <h2><a id="toggle" href="#">Music</a></h2> <img id="blockTR" src="img/category_music_bw.jpg" class="blockHd" alt="music" /> </div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/133660-simple-problem/#findComment-695557 Share on other sites More sharing options...
Psycho Posted November 21, 2008 Share Posted November 21, 2008 Nightslyr's solution is much more elegant. But, to answer your question directly (to prevent similar errors in the future) the problem in your code was related to the use of quote marks. You used a double quote mark to open the trigger event, and then used a double quote mark within the getElementById() function. onmouseover="document.getElementById("blockTR").src = 'img/category_music.jpg';" When the browser tries to read that it sees this onmouseover="document.getElementById(" It should work with this (but I'd stick with the code nightslyr provided) onmouseover="document.getElementById('blockTR').src = 'img/category_music.jpg';" Quote Link to comment https://forums.phpfreaks.com/topic/133660-simple-problem/#findComment-695595 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.