61 users online (1 members and 60 guests)  


  Results 1 to 7 of 7

Related

  1. onmouseover to change value to true?    Forum: Javascript Forum
    Replies: 0
  2. Fade-effect    Forum: Javascript Forum
    Replies: 0
  3. onMouseover..can this be done easily?    Forum: Javascript Forum
    Replies: 3
  4. fade in image problem    Forum: HTML Forum
    Replies: 1
  5. Cycling Banner Fade In Effect    Forum: Javascript Forum
    Replies: 3
  1. #1
    rowena's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2004
    Location
    Cashmere, WA
    Posts
    3

    Question A little help with OnMouseover fade in/out menu

    I downloaded this JavaScript to use on a web page I'm currently making. It was intended to be a menu with a fade in/out effect. The sample did not have working links so I cannot figure out why everything but the links work. My pictures fade in and out like they are supposed to but there are no links even though there is an address associated with each picture.

    Can anyone help me with this?

    See the code below.

    <!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    <html>
    <head>
    <meta http-equive="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="khid.css" />
    <title>Katie Holland Interiors</title>

    <script language=javaScript>
    <!-- Beginning of JavaScript -

    img0 = new Image();
    img0.src = "button1a.jpg";

    img1 = new Image();
    img1.src = "button2a.jpg";

    img2 = new Image();
    img2.src = "button3a.jpg";

    img3 = new Image();
    img3.src = "button4a.jpg";

    img4 = new Image();
    img4.src = "button5a.jpg";

    img5 = new Image();
    img5.src = "button6a.jpg";


    var i_strngth=1
    var i_image=0
    var changeopacity
    var imgscr
    var timer


    function preshowimage(thisimage) {
    clearTimeout(timer)
    button1a.innerHTML="<a href='http://katiehollandinteriors.com/about.html' onMouseOver='preshowimage(\"button1a\")'><img style='filter:alpha(opacity=20)' src='button1a.jpg' border=0>";
    button2a.innerHTML="<a href='http://katiehollandinteriors.com/process.html' onMouseOver='preshowimage(\"button2a\")'><img style='filter:alpha(opacity=20)' src='button2a.jpg' border=0>";
    button3a.innerHTML="<a href='http://katiehollandinteriors.com/room.html' onMouseOver='preshowimage(\"button3a\")'><img style='filter:alpha(opacity=20)' src='button3a.jpg' border=0>";
    button4a.innerHTML="<a href='http://katiehollandinteriors.com/window.html' onMouseOver='preshowimage(\"button4a\")'><img style='filter:alpha(opacity=20)' src='button4a.jpg' border=0>";
    button5a.innerHTML="<a href='http://katiehollandinteriors.com/referrals.html' onMouseOver='preshowimage(\"button5a\")'><img style='filter:alpha(opacity=20)' src='button5a.jpg' border=0>";
    button6a.innerHTML="<a href='http://katiehollandinteriors.com/contact.html' onMouseOver='preshowimage(\"button6a\")'><img style='filter:alpha(opacity=20)' src='button6a.jpg' border=0>";
    i_strngth=10
    imgscr=thisimage+".jpg"
    changeopacity=eval(thisimage)
    showimage()
    }



    function showimage() {
    if(document.all) {
    if (i_strngth <=100) {
    changeopacity.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imgscr+" border=0>";
    i_strngth=i_strngth+2
    var timer=setTimeout("showimage()",50)

    }
    else {
    clearTimeout(timer)
    var timer=setTimeout("hideimage()",400)
    }
    }
    }

    function hideimage() {
    if(document.all) {
    if (i_strngth >=10) {
    changeopacity.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imgscr+" border=0>";
    i_strngth=i_strngth-2
    var timer=setTimeout("hideimage()",400)

    }
    else {
    clearTimeout(timer)
    var timer=setTimeout("showimage()",50)
    }
    }
    }

    // - End of JavaScript - -->
    </script>

    </head>

    <body background="menu.jpg">

    <div id="button1a" style="visibility:visible;top:10px;left:25px"><a href="http://katiehollandinteriors.com/about.html" onMouseOver="preshowimage('button1a')"><img style='filter:alpha(opacity=20)' src=button1a.jpg border=0></a></div><p>
    <div id="button2a" style="visibility:visible;top:110px;left:20px"><a href="http://katiehollandinteriors.com/process.html" onMouseOver="preshowimage('button2a')"><img style='filter:alpha(opacity=20)' src=button2a.jpg border=0></a></div><p>
    <div id="button3a" style="visibility:visible;top:210px;left:20px"><a href="http://katiehollandinteriors.com/room.html" onMouseOver="preshowimage('button3a')"><img style='filter:alpha(opacity=20)' src=button3a.jpg border=0></a></div><p>
    <div id="button4a" style="visibility:visible;top:310px;left:20px"><a href="http://katiehollandinteriors.com/window.html" onMouseOver="preshowimage('button4a')"><img style='filter:alpha(opacity=20)' src=button4a.jpg border=0></a></div><p>
    <div id="button5a" style="visibility:visible;top:410px;left:20px"><a href="http://katiehollandinteriors.com/referrals.html" onMouseOver="preshowimage('button5a')"><img style='filter:alpha(opacity=20)' src=button5a.jpg border=0></a></div><p>
    <div id="button6a" style="visibility:visible;top:510px;left:20px"><a href="http://katiehollandinteriors.com/contact.html" onMouseOver="preshowimage('button6a')"><img style='filter:alpha(opacity=20)' src=button6a.jpg border=0></a></div>

    </body>
    </html>

  2. #2
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel
    try closing the links in this section of code
    Code:
    function preshowimage(thisimage) {
    clearTimeout(timer)
    button1a.innerHTML="<a href='http://katiehollandinteriors.com/about.html' onMouseOver='preshowimage(\"button1a\")'><img style='filter:alpha(opacity=20)' src='button1a.jpg' border=0>";
    button2a.innerHTML="<a href='http://katiehollandinteriors.com/process.html' onMouseOver='preshowimage(\"button2a\")'><img style='filter:alpha(opacity=20)' src='button2a.jpg' border=0>";
    button3a.innerHTML="<a href='http://katiehollandinteriors.com/room.html' onMouseOver='preshowimage(\"button3a\")'><img style='filter:alpha(opacity=20)' src='button3a.jpg' border=0>";
    button4a.innerHTML="<a href='http://katiehollandinteriors.com/window.html' onMouseOver='preshowimage(\"button4a\")'><img style='filter:alpha(opacity=20)' src='button4a.jpg' border=0>";
    button5a.innerHTML="<a href='http://katiehollandinteriors.com/referrals.html' onMouseOver='preshowimage(\"button5a\")'><img style='filter:alpha(opacity=20)' src='button5a.jpg' border=0>";
    button6a.innerHTML="<a href='http://katiehollandinteriors.com/contact.html' onMouseOver='preshowimage(\"button6a\")'><img style='filter:alpha(opacity=20)' src='button6a.jpg' border=0>";
    i_strngth=10 
    imgscr=thisimage+".jpg"
    changeopacity=eval(thisimage) 
    showimage()
    }
    Dave

  3. #3
    rowena's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2004
    Location
    Cashmere, WA
    Posts
    3
    Could you explain what you mean by closing the links? I'm not too familiar with JavaScript and/or HTML. Thanks.

  4. #4
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel
    This should explain it http://www.ahfb2000.com/tagslistlinks.php

    Dave

  5. #5
    rowena's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2004
    Location
    Cashmere, WA
    Posts
    3
    Okay, I put the closing tag (see below) but it still doesn't work. If I place the mouse over the image, if I look really quickly the pointer that shoes a link appears for a split second but all the frantic clicking doesn't make the link work. Any other suggestions? I was using this code solely because I liked the fading in and out effect it gave rather than just a fast image swap. If you know of any other ways to achieve this, I'm open to other options. Thanks for your help.

    clearTimeout(timer)
    button1a.innerHTML="<a href='http://katiehollandinteriors.com/about.html' onMouseOver='preshowimage(\"button1a\")'><img style='filter:alpha(opacity=20)' src='button1a.jpg' border=0></a>";
    button2a.innerHTML="<a href='http://katiehollandinteriors.com/process.html' onMouseOver='preshowimage(\"button2a\")'><img style='filter:alpha(opacity=20)' src='button2a.jpg' border=0></a>";
    button3a.innerHTML="<a href='http://katiehollandinteriors.com/room.html' onMouseOver='preshowimage(\"button3a\")'><img style='filter:alpha(opacity=20)' src='button3a.jpg' border=0></a>";
    button4a.innerHTML="<a href='http://katiehollandinteriors.com/window.html' onMouseOver='preshowimage(\"button4a\")'><img style='filter:alpha(opacity=20)' src='button4a.jpg' border=0></a>";
    button5a.innerHTML="<a href='http://katiehollandinteriors.com/referrals.html' onMouseOver='preshowimage(\"button5a\")'><img style='filter:alpha(opacity=20)' src='button5a.jpg' border=0></a>";
    button6a.innerHTML="<a href='http://katiehollandinteriors.com/contact.html' onMouseOver='preshowimage(\"button6a\")'><img style='filter:alpha(opacity=20)' src='button6a.jpg' border=0></a>";

  6. #6
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel
    I need a good slap upside the head I guess, I did not even notice that the section I asked you to close the links is actually in the documents <head>. You should remove all link tags that are within the <head></head> tags. Not that I think this will fix the problem but it is wrong.

    Hopefully somebody that is better at JS than myself will pop in and give you a hand.

    Dave

  7. #7
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    The function showimage() is changing the innerHTML of the div as well as what it should be.

    Its not clear why its doing this, I would re-write that entire function.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?



Tags for this Thread