Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    OK, this is really weird.

    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:

    <code>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>



    <link rel = "stylesheet" type = "text/css" href = "patterns/patterns.css">
    <link rel = "stylesheet" type = "text/css" href = "universalstyle.css">


    <script type = "text/javascript">

    if(document.images)
    {
    var image_array = new Array();
    var path = 'patterns/images/'

    image_array[0] = path + "bathroom_4a.jpg";
    image_array[1] = path + "bathroom_4b.jpg";
    image_array[2] = path + "bathroom_5a.jpg";
    image_array[3] = path + "bathroom_5b.jpg";
    image_array[4] = path + "bathroom_6a.jpg";
    image_array[5] = path + "bathroom_6b.jpg";

    var preload_image = new Array();

    for(var i=0; i<image_array.length; i++)
    {
    preload_image[i] = new Image();
    preload_image[i].src = image_array[i];
    }
    }


    </script>




    </head>

    <body>


    <div id="wrapper">

    <div id="navimage">

    <img src="request_a_quote/images/Federation_church.jpg" alt="Federation Vernadah" width="329" height="583">

    </div>

    <div id="oeta_logo">

    <img src="images/main_oeta_logo.png" alt="OETA logo" width="900" >

    </div>

    <div id="buttons">

    <ul>

    <li id="aboutus"><a href="about_us.html" >Aboutus</a></li>
    <li id="patterns"><a href="patterns.html">Patterns</a></li>
    <li id="technical"><a href="technical.html">Technical</a></li>
    <li id="gallery"><a href="gallery.html">Gallery</a></li>
    <li id="services"><a href="services.html">Services</a></li>
    <li id="requestaquote"><a href="request_a_quote.html">Request A Quote</a></li>
    <li id="contactus"><a href="contact_us.html">ContactUs</a></li>


    </ul>

    </div>

    <div id="requestaquote_background">

    <div id="requestaquote_title">

    <h3>Patterns</h3>

    </div>



    <script type = "text/javascript">

    function rollover(name,filename)
    {
    var fullpath = 'patterns/images/' + filename;
    document.images[name].src = fullpath;
    }

    </script>

    <script type = "text/javascript">
    function popup(url)
    {
    var width = 600;
    var height = 514;
    var left = (screen.width - width)/2;
    var top = (screen.height - height)/2;
    var params = 'width='+width+', height='+height;
    params += ', top='+top+', left='+left;
    params += ', directories=no';
    params += ', location=no';
    params += ', menubar=no';
    params += ', resizeable=no';
    params += ', scrollbars=no';
    params += ', status=no';
    params += ', toolbar=no';
    newwin=window.open(url, 'hello', params);
    if(window.focus) {newwin.focus()}
    return false;
    }

    </script>

    <div id = "image_gallery1">

    <table id = "table1">

    <tr>
    <td>
    <a href = "javascript:void(0)"
    onclick="popup('patterns/images/bathroom_4c.jpg')"
    onmouseover="rollover('button1','bathroom_4b.jpg')"
    onmouseout="rollover('button1', 'bathroom_4a.jpg')">
    <img src = "patterns/images/bathroom_4a.jpg" name = 'button1' border = "0"></a>
    </td>

    <td>
    <a href = "javascript:void(0)"
    onclick="popup('patterns/images/bathroom_5c.jpg')"
    onmouseover="rollover('button2','bathroom_5b.jpg')"
    onmouseout="rollover('button2', 'bathroom_5a.jpg')">
    <img src = "patterns/images/bathroom_5a.jpg" name = 'button2' border = "0"></a>
    </td>

    <td>
    <a href = "javascript:void(0)"
    onclick="popup('patterns/images/bathroom_6c.jpg')"
    onmouseover="rollover('button3','bathroom_6b.jpg')"
    onmouseout="rollover('button3', 'bathroom_6a.jpg')">
    <img src = "patterns/images/bathroom_6a.jpg" name = 'button3' border = "0"></a>
    </td>

    <td>
    <a href = "javascript:void(0)"
    onclick="popup('patterns/images/bathroom_7c.jpg')"
    onmouseover="rollover('button4','bathroom_7b.jpg')"
    onmouseout="rollover('button4', 'bathroom_7a.jpg')">
    <img id = "yep" src = "patterns/images/bathroom_7a.jpg" name = 'button4' border = "0"></a>
    </td>


    </tr>

    </table>

    </div>

    </div>



    </div>



    </body>
    </html>

    </code>

    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.

  • #2
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by modermo View Post
    <code>
    Code tags use square brackets
    Code:
    <a href = "javascript:void(0)"
    Don't use the pseudo protocol, use href='#' and return false in the onclick handler.

    Before gong any further, I think you need to validate your code: http://validator.w3.org/

  • #3
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    figured it out!!!!

    when iwas putting in my links, the pseudo classes, i had a:active, a:focus.

    The comma was what got me, cause every other link meant that this particular image would show up.

    damn it felt good when i figured it out. Not really a big thing, but damn it felt good.


  •  

    Posting Permissions

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