473,320 Members | 1,900 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Image on mouseover not working

I got this code, and it somehow doesnt work.

Expand|Select|Wrap|Line Numbers
  1. <TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0 align="center">
  2.   <TR>
  3.     <TD background="{image-path}navfiller.gif" HEIGHT=40 width="50%"></TD>
  4.  
  5.     <TD width="110"><a href="index.php"><IMG SRC="{image-path}matrix_03.gif" WIDTH=110 HEIGHT=40 ALT="Homepage" border="0" onmouseover="myOn('matrix_03')" onmouseout="myOut('matrix_03')"></a></TD>
  6.  
  7.     <TD width="100"><a href="modules.php?name=Forums"><IMG SRC="{image-path}matrix_04.gif" WIDTH=100 HEIGHT=40 ALT="Forums" border="0" onmouseover="myOn('matrix_04')" onmouseout="myOut('matrix_04')"></a></TD>
  8.  
  9.     <TD width="100"><a href="modules.php?op=modload&name=Downloads&file=index"><IMG SRC="{image-path}matrix_05.gif" WIDTH=100 HEIGHT=40 ALT="Downloads" border="0" onmouseover="myOn('matrix_05')" onmouseout="myOut('matrix_05')"></a></TD>
  10.  
  11.     <TD width="100"><a href="modules.php?name=Your_Account"><IMG SRC="{image-path}matrix_06.gif" WIDTH=100 HEIGHT=40 ALT="Profile" border="0" onmouseover="myOn('matrix_06')" onmouseout="myOut('matrix_06')"></a></TD>
  12.  
  13.     <TD width="100"><a href="modules.php?op=modload&name=Web_Links&file=index"><IMG SRC="{image-path}matrix_07.gif" WIDTH=100 HEIGHT=40 ALT="Links" border="0" onmouseover="myOn('matrix_07')" onmouseout="myOut('matrix_07')"></a></TD>
  14.  
  15.     <TD width="100"><a href="modules.php?name=Maps"><IMG SRC="{image-path}matrix_08.gif" WIDTH=100 HEIGHT=40 ALT="Download or Upload Maps" border="0" onmouseover="myOn('matrix_08')" onmouseout="myOut('matrix_08')"></a></TD>
  16.  
  17.     <TD width="110"><a href="modules.php?name=Content&pa=showpage&pid=2"><IMG SRC="{image-path}matrix_09.gif" WIDTH=110 HEIGHT=40 ALT="Gallery" border="0" onmouseover="myOn('matrix_09')" onmouseout="myOut('matrix_09')"></a></TD>
  18.  
  19.     <TD background="{image-path}navfiller.gif" HEIGHT=40 width="50%"></TD>
  20.   </TR>
  21. </TABLE>
  22.  
My Internet Explorer does say that the page contains errors at the bottom left.
Further there is this bit, javascript, but I'm sure that's gone right:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. <!-- // 
  3. if (document.images) { 
  4.  
  5. //preload normal images
  6. matrix_03= new Image(110,40); 
  7. matrix_03.src= 'http://asu-clan.info/html/themes/reloaded/images/matrix_03.gif' ; 
  8. matrix_04= new Image(100,40); 
  9. matrix_04.src= 'http://asu-clan.info/html/themes/reloaded/images/matrix_04.gif' ; 
  10. matrix_05= new Image(100,40); 
  11. matrix_05.src= 'http://asu-clan.info/html/themes/reloaded/images/matrix_05.gif' ; 
  12. matrix_06= new Image(100,40); 
  13. matrix_06.src= 'http://asu-clan.info/html/themes/reloaded/images/matrix_06.gif' ; 
  14. matrix_07= new Image(100,40); 
  15. matrix_07.src= 'http://asu-clan.info/html/themes/reloaded/images/matrix_07.gif' ; 
  16. matrix_08= new Image(100,40); 
  17. matrix_08.src= 'http://asu-clan.info/html/themes/reloaded/images/matrix_08.gif' ; 
  18. matrix_09= new Image(110,40); 
  19. matrix_09.src= 'http://asu-clan.info/html/themes/reloaded/images/matrix_09.gif' ; 
  20.  
  21. //preload hover images
  22. matrix_03_hover= new Image(110,40); 
  23. matrix_03_hover.src= 'http://asu-clan.info/html/themes/reloaded/images/matrix_03_hover.gif' ; 
  24. matrix_04_hover= new Image(100,40); 
  25. matrix_04_hover.src= 'http://asu-clan.info/html/themes/reloaded/images/matrix_04_hover.gif' ; 
  26. matrix_05_hover= new Image(100,40); 
  27. matrix_05_hover.src= 'http://asu-clan.info/html/themes/reloaded/images/matrix_05_hover.gif' ; 
  28. matrix_06_hover= new Image(100,40); 
  29. matrix_06_hover.src= 'http://asu-clan.info/html/themes/reloaded/images/matrix_06_hover.gif' ; 
  30. matrix_07_hover= new Image(100,40); 
  31. matrix_07_hover.src= 'http://asu-clan.info/html/themes/reloaded/images/matrix_07_hover.gif' ; 
  32. matrix_08_hover= new Image(100,40); 
  33. matrix_08_hover.src= 'http://asu-clan.info/html/themes/reloaded/images/matrix_08_hover.gif' ; 
  34. matrix_09_hover= new Image(110,40); 
  35. matrix_09_hover.src= 'http://asu-clan.info/html/themes/reloaded/images/matrix_09_hover.gif' ; 
  36.  
  37. function myOn(ImgName) { 
  38. document[myImgName].src=eval(ImgName + '_hover').src; 
  39. function myOut(ImgName) { 
  40. document[myImgName].src=eval(ImgName).src; 
  41. }
  42. //-->
  43. </script>
  44.  
I've been trying to swap things here and there in the code and still not able to find the problem.
Could anyone help me figuring this out ?

Thanks in advance,
Evolution445
Aug 12 '08 #1
11 2975
acoder
16,027 Expert Mod 8TB
What error messages are you getting?

PS. Moved to the JavaScript forum.
Aug 14 '08 #2
Hi,

I don't get any error messages, it just doesnt work, and I cannot figure the problem out either.
Aug 14 '08 #3
acoder
16,027 Expert Mod 8TB
Well, you did say:
My Internet Explorer does say that the page contains errors at the bottom left.
Double click the error icon. If the error message is not very helpful (which it can be many times), use another browser and check the error console in there.
Aug 15 '08 #4
Oh, i see, I didnt know you could click it. This is what it says:

Internet Explorer:

Line: 99
Character/Mark: 1
Error: 'document[...]' Is empty or not an object
Code: 0
URL: http://asu-clan.info/html/index.php

Firefox doesnt give any errors, it just says 'Done', while the button images dont change when the mouse is over them.
Aug 15 '08 #5
acoder
16,027 Expert Mod 8TB
Now that you've provided a link, Firefox also gives errors (check the error console).

You need to name the images with the string that you pass to the myOn and myOut functions.
Aug 16 '08 #6
You need to name the images with the string that you pass to the myOn and myOut functions.
I did that ? In the code it has:

Expand|Select|Wrap|Line Numbers
  1. onmouseover="myOn('matrix_03')" onmouseout="myOut('matrix_03')"
  2.  
Or is it 'naming the images' in a differently ?

( Sorry, I'm not english and didnt really understand that )
Aug 16 '08 #7
acoder
16,027 Expert Mod 8TB
Yes, I meant by giving the image a name attribute. For example, in the last example, you would name the image "matrix_03":
Expand|Select|Wrap|Line Numbers
  1. <img name="matrix_03" ...>
or even just pass 'this' (without the quotes) to myOn/myOff and change myOn to, e.g.
Expand|Select|Wrap|Line Numbers
  1. function myOn(Img) {
  2. Img.src=window[Img.name + '_hover'].src;
Aug 17 '08 #8
The javascript bit comes off a tutorial somewhere on the net, I just modified it so it works with my site, but it just doesnt work, neither did the whole tutorial code when i tried it on an empty html page.

Naming the image before it goes into the myOn/myOut function... there's 7 different images there, isn't this naming them ?

Expand|Select|Wrap|Line Numbers
  1. matrix_03= new Image(110,40); 
  2. matrix_03.src= 'http://asu-clan.info/html/themes/reloaded/images/matrix_03.gif' ; 
  3. matrix_04= new Image(100,40); 
  4. matrix_04.src= 'http://asu-clan.info/html/themes/reloaded/images/matrix_04.gif' ; 
  5.  
Then the function:
Expand|Select|Wrap|Line Numbers
  1. function myOn(ImgName) { 
  2. document[myImgName].src=eval(ImgName + '_hover').src; 
  3. function myOut(ImgName) { 
  4. document[myImgName].src=eval(ImgName).src; 
  5.  
Then in the <a href>, that name is called:
Expand|Select|Wrap|Line Numbers
  1. onmouseover="myOn('matrix_03')" onmouseout="myOut('matrix_03')"
  2.  

I'm still lost here, I wouldn't know how to proceed

And why I didnt post on that tutorial page at first, well, because I know that help here on this site is from experts, fast and usually good, and I wasn't too sure about that on the tutorial website
Aug 17 '08 #9
acoder
16,027 Expert Mod 8TB
No, that's not naming the image. I already showed you how to name the images:
[html]<img name="matrix_01" ...>
<img name="matrix_02" ...>
<img name="matrix_03" ...>[/html]etc.
Aug 17 '08 #10
I see, stupid me.

It works now, thanks!
Aug 18 '08 #11
acoder
16,027 Expert Mod 8TB
No worries, glad it's working :)

Note that you can avoid eval in myOn/myOut using window[ImgName + "_hover"].src and window[ImgName].src respectively.
Aug 18 '08 #12

Sign in to post your reply or Sign up for a free account.

Similar topics

3
by: John | last post by:
Imagine this: I have a gif-image with text, coloured green. When MouseOver occurs the gif will swap to another gif with red colourded text. On MouseOut the gif turns back to the green text. ...
8
by: PhilM | last post by:
Having googled myself silly, I now ask, if only to confirm my conclusions Is it possible to emulate the <javascript>mouseover in css, to replace link images with an alternate? Having asked, I...
2
by: Nalaka | last post by:
Hi (I am using visual studio 2005 beta 2) I have a simple asp.net data grid, with a edit (update and cancel) set. When the button mode is link, it works fine. But when the button mode is...
3
by: Varangian | last post by:
How can I make a Image Click working before Page Load event? The Problem I'm getting is that I'm loading an ImageButton dynamically from a Web User Control. How can I make the Web User Control...
2
by: Progman | last post by:
tell me how do you change an image from another when the mouse is over using asp.net please past some code
0
by: =?Utf-8?B?SGFyZHkgV2FuZw==?= | last post by:
Hi all, I am building a web site with theme support, under each theme's folder there are some images. Some of my images need to be skinned, I know I can build a skin file with line like ...
4
by: ericjiii | last post by:
Hi. A friend of mine asked me if I could look at one of his java scripts in order to get it working. Unfortunately I am stumped and was wondeirng if somebody with a bit more experience than myself...
0
by: numbnutz | last post by:
Hi, I am currently working on an XML Gallery for my girlfriend's brother who is a photographer. I have created a flash front end template and am using an XML database to load the images and...
3
by: yogarajan | last post by:
hi all my div background image not working in firefox it is working in IE <style type="text/css"> #leftlayer1 { background: url(foot left.JPG); height:90px;
13
by: seegoon | last post by:
Hi all. So: I've put together a page, in which I want several clickable image maps. I've put those together already. The problem with image maps is that they're not very intuitive, so users don't...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.