Problems with my Javascript image preloader code
I can't seem to understand why my images still won't show up with my code. All my folders and images are correctly names and placed accordingly. However, if someone could look over my code and see if there is an error there and get this code to run properly. It would be great.
<!DOCTYPE html>
<html>
<head>
<title>Sample page</title>
<script type="text/javascript">
function changeImage(replacement)
{
document.getElementById("main_image").src = replacement;
return false;
开发者_运维知识库 }
// End -->
</script>
</head>
<body>
<p>
<a href="javascript:changeImage('image1.jpg')">Image 1</a>
<a href="javascript:changeImage('image2.jpg')">Image 2</a>
<a href="javascript:changeImage('image3.jpg')">Image 3</a>
<a href="javascript:changeImage('image4.jpg')">Image 4</a>
</p>
<p>
<img id="main_image" src="image-viewer/blank.jpg" alt="" /></p>
<p><center>
<font face="arial, helvetica" size"-2">
</center><p>
</font></body>
</html>
Remove the return false;
line.
(This should only be used for onclick
handlers)
When you return any value from a javascript:
URI, the browser navigates to the return value.
When you return false
from an event handler, the event is suppressed.
It's hard to tell without an example page. If all your images are under the 'image-viewer' directory then you will need to add that to the path in all your links i.e
<a href="javascript:changeImage('image-viewer/image1.jpg')">Image 1</a>
Is image1.jpg, image2.jpg, image3.jpg, and image4.jpg in the same folder as the file you pasted? If not, you need to specify the path to that in your javascript:changeImage()
call.
精彩评论