By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,277 Members | 1,505 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,277 IT Pros & Developers. It's quick & easy.

Image rollover doesnt work in Firefox

P: 4
Hey

new to javascript

figuring out how to fix this darn problem. I employ an image rollover, and it works beautifully in safari. But in firefox, the image has an annoying blue border around it, which i didnt specify. Further to that, when I click it, it should lead straight into another site/window. But when i click it, another totally irrelevant image pops up. Its only when i click it again that it the link takes me to another site.

Heres the javascript:

[HTML]<a href = "patterns/images/bathroom_4c.jpg"
onMouseOver = "window.document.bathroom_four.src = 'patterns/images/bathroom_4a.jpg';"
onMouseOut = "window.document.bathroom_four.src = 'patterns/images/bathroom_4b.jpg';">
<img src = "patterns/images/bathroom_4b.jpg" name = "bathroom_four" alt = "victorian_bathroom_4">
</a>

[/HTML]Thanks. Any help would be much appreciated
Aug 15 '07 #1
Share this Question
Share on Google+
3 Replies


acoder
Expert Mod 15k+
P: 16,027
Please use code tags when posting code. Thanks!

You're linking to the image in question. There's no link to another site or page.

To remove the border, set the border to 0:[HTML]border="0"[/HTML]
Aug 16 '07 #2

P: 4
Hey all

This problem has been baffling me for a long, long time. Really. It just doesnt make sense.

Alright.

This is whats happening.

I have a rollover (green), thats clickable, and when clicked, pops up a new window, with the smaller rollover image, now in a large size. Simple. This works fine in Safari, but in firefox, it doesnt. But this isnt a normal 'it doesnt work'. No. This just doesnt make sense.

All rollovers work fine. But when clicked in firefox, instead of bringing up a popup window with a larger image, another completely irrelevant image (which actually happens to be a link somewhere else on the page (shown with red in the code)) shows on the screen, along with what looks like a dotted line, starting from where the initial rollover was, (and where the image (the irrlevant one) has popped up), and finished at the opposite side of the page. It isnt until you click the irrelevant image again, that the new window pops up.

now i could suspect something wrong with the css, but i am sure it is the javascript. If you need me to email any photos, I am more than happy to do so. it will make the problem 100 times clearer.

here is the code:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  7.  
  8.  
  9.  
  10.     <link rel = "stylesheet" type = "text/css" href = "patterns/patterns.css">
  11.     <link rel = "stylesheet" type = "text/css" href = "universalstyle.css">
  12.  
  13.  
  14.     <script type = "text/javascript">
  15.  
  16.         if(document.images)
  17.             {
  18.                 var image_array = new Array();
  19.                 var path = 'patterns/images/'
  20.  
  21.                 image_array[0] = path + "bathroom_4a.jpg";
  22.                 image_array[1] = path + "bathroom_4b.jpg";
  23.                 image_array[2] = path + "bathroom_5a.jpg";
  24.                 image_array[3] = path + "bathroom_5b.jpg";
  25.                 image_array[4] = path + "bathroom_6a.jpg";
  26.                 image_array[5] = path + "bathroom_6b.jpg";
  27.  
  28.                 var preload_image = new Array();
  29.  
  30.                 for(var i=0; i<image_array.length; i++)
  31.                      {
  32.                         preload_image[i] = new Image();
  33.                         preload_image[i].src = image_array[i];
  34.                      }
  35.             }
  36.  
  37.  
  38.     </script>
  39.  
  40.  
  41.  
  42.  
  43. </head>
  44.  
  45. <body>
  46.  
  47.  
  48.     <div id="wrapper">
  49.  
  50.         <div id="navimage">
  51.  
  52.             <img src="request_a_quote/images/Federation_church.jpg" alt="Federation Vernadah" width="329" height="583">
  53.  
  54.         </div>
  55.  
  56.         <div id="oeta_logo">
  57.  
  58.             <img src="images/main_oeta_logo.png" alt="OETA logo" width="900" >
  59.  
  60.         </div>
  61.  
  62.         <div id="buttons">
  63.  
  64.             <ul>
  65.  
  66.                 <li id="aboutus"><a href="about_us.html" >Aboutus</a></li>
  67.                 <li id="patterns"><a href="patterns.html">Patterns</a></li>
  68.                 <li id="technical"><a href="technical.html">Technical</a></li>
  69.                 <li id="gallery"><a href="gallery.html">Gallery</a></li>
  70.                 <li id="services"><a href="services.html">Services</a></li>
  71.                 [COLOR="Red"]<li id="requestaquote"><a href="request_a_quote.html">Request A Quote</a></li>[/COLOR]
  72.                 <li id="contactus"><a href="contact_us.html">ContactUs</a></li>
  73.  
  74.  
  75.             </ul>
  76.  
  77.         </div>
  78.  
  79.         <div id="requestaquote_background">
  80.  
  81.                 <div id="requestaquote_title">
  82.  
  83.                     <h3>Patterns</h3>
  84.  
  85.                 </div>
  86.  
  87.  
  88.  
  89.                 <script type = "text/javascript">
  90.  
  91.                     function rollover(name,filename)
  92.                         {
  93.                             var fullpath = 'patterns/images/' + filename;
  94.                             document.images[name].src = fullpath; 
  95.                         }
  96.  
  97.                 </script>
  98.  
  99.                 <script type = "text/javascript">
  100.                 function popup(url)
  101.                     {
  102.                         var width = 600;
  103.                         var height = 514;
  104.                         var left = (screen.width - width)/2;
  105.                         var top = (screen.height - height)/2;
  106.                         var params = 'width='+width+', height='+height;
  107.                         params += ', top='+top+', left='+left;
  108.                         params += ', directories=no';
  109.                         params += ', location=no';
  110.                         params += ', menubar=no';
  111.                         params += ', resizeable=no';
  112.                         params += ', scrollbars=no';
  113.                         params += ', status=no';
  114.                         params += ', toolbar=no';
  115.                         newwin=window.open(url, 'hello', params);
  116.                         if(window.focus) {newwin.focus()}
  117.                         return false;
  118.                     }
  119.  
  120.                 </script>
  121.  
  122.         <div id = "image_gallery1">        
  123.  
  124.         <table id = "table1">
  125.  
  126.             <tr>
  127.                 [COLOR="SeaGreen"]<td>    
  128.                     <a href = "javascript:void(0)"
  129.                         onclick="popup('patterns/images/bathroom_4c.jpg')"
  130.                         onmouseover="rollover('button1','bathroom_4b.jpg')"
  131.                         onmouseout="rollover('button1', 'bathroom_4a.jpg')">
  132.                             <img src = "patterns/images/bathroom_4a.jpg" name = 'button1' border = "0"></a>
  133.                 </td>        
  134.  
  135.                 <td>    
  136.                     <a href = "javascript:void(0)"
  137.                         onclick="popup('patterns/images/bathroom_5c.jpg')"
  138.                         onmouseover="rollover('button2','bathroom_5b.jpg')"
  139.                         onmouseout="rollover('button2', 'bathroom_5a.jpg')">
  140.                             <img src = "patterns/images/bathroom_5a.jpg" name = 'button2' border = "0"></a>
  141.                 </td>
  142.  
  143.                 <td>    
  144.                     <a href = "javascript:void(0)"
  145.                         onclick="popup('patterns/images/bathroom_6c.jpg')"
  146.                         onmouseover="rollover('button3','bathroom_6b.jpg')"
  147.                         onmouseout="rollover('button3', 'bathroom_6a.jpg')">
  148.                             <img src = "patterns/images/bathroom_6a.jpg" name = 'button3' border = "0"></a>
  149.                 </td>
  150.  
  151.                 <td>    
  152.                     <a href = "javascript:void(0)"
  153.                         onclick="popup('patterns/images/bathroom_7c.jpg')"
  154.                         onmouseover="rollover('button4','bathroom_7b.jpg')"
  155.                         onmouseout="rollover('button4', 'bathroom_7a.jpg')">
  156.                             <img id = "yep" src = "patterns/images/bathroom_7a.jpg" name = 'button4' border = "0"></a>
  157.                 </td>[/COLOR]
  158.  
  159.             </tr>
  160.  
  161.         </table>    
  162.  
  163.         </div>
  164.  
  165.         </div>
  166.  
  167.  
  168.  
  169.     </div>
  170.  
  171.  
  172.  
  173. </body>
  174. </html>
  175.  
  176.  
Just to let you know, when, in css, i apply a display:block command to one of the javascript rollovers, the irrelevant image does show up, but that dottend line is a lot smaller box.

again, if you need photos, just let me know and i can post them through to you. i dont have a site up yet to use the url.

thanks again.

as you can see, im pretty determined to solve this problem.
Aug 18 '07 #3

acoder
Expert Mod 15k+
P: 16,027
Please do not double post. Merged threads.

Thanks for using code tags. Unfortunately, they're supposed to be in square brackets [] and you can specify a language, e.g. [code=javascript] or [code=html].
Aug 18 '07 #4

Post your reply

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