1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Problem with 2 images activated onMouseover

Discussion in 'HTML & Website Design' started by KHakari, Jun 24, 2006.

0
  1. #1
    First time posting here, so if I do this wrong or don't know your protocols yet, please be gentle.

    I'm trying to get a button to light up (change image) and at the same time get another image to appear on another part of the page (only onMouseover).

    Here's what I have:

    <html>
    <title></title>
    <head>

    <SCRIPT LANGUAGE="JAVASCRIPT">
    function roll(img_name1, img_src1, img_name2, img_src2, img_name3, img_src3, img_name4, img_src4, img_name5, img_src5)
    {
    document[img_name1].src = img_src1;
    document[img_name2].src = img_src2;
    document[img_name3].src = img_src3;
    document[img_name4].src = img_src4;
    document[img_name5].src = img_src5;
    }
    </SCRIPT>

    </head>

    <body bgcolor=rgb(204,204,204) vlink=rgb(204,204,204) dlink=rgb(204,204,204) alink=rgb(204,204,204) link=rgb(204,204,204)>

    <div style=position:absolute;top:100;left:400><IMG SRC="palm.gif" height=100></div>

    <div style=position:absolute;top:100;left:200>
    <A HREF="calendar\jan.pdf" target="_blank"
    onmouseover="roll('sub1', 'janover.png', 'sub2', 'mlk.jpg')"
    onmouseout="roll('sub1', 'janup.png', 'sub2', 'palm.gif')">
    <IMG SRC="janup.png" NAME="sub1">
    </A>
    </div>

    <div style=position:absolute;top:100;left:400><IMG SRC="palm.gif" name="sub2" height=100></div>

    <div style=position:absolute;top:130;left:200>
    <A HREF="calendar\feb.pdf" target="_blank"
    onmouseover="roll('sub3', 'febover.png', 'sub4', 'snowmanflag.jpg')"
    onmouseout="roll('sub3', 'febup.png', 'sub4', 'palm.gif')">
    <IMG SRC="febup.png" NAME="sub3">
    </A>
    </div>

    <div style=position:absolute;top:100;left:400><img src="palm.gif" name="sub4" height=100></div>

    <div style=position:absolute;top:160;left:200>
    <A HREF="calendar\mar.pdf" target="_blank"
    onmouseover="roll('sub5', 'marover.png', 'sub6', 'clover.jpg')"
    onmouseout="roll('sub5', 'marup.png', 'sub6', 'palm.gif')">
    <IMG SRC="marup.png" NAME="sub5">
    </A>
    </div>

    <div style=position:absolute;top:100;left:400><img src="palm.gif" name="sub6" height=100></div>

    <div style=position:absolute;top:190;left:200>
    <A HREF="calendar\apr.pdf" target="_blank"
    onmouseover="roll('sub7', 'aprover.png', 'sub8', 'clearearth.gif')"
    onmouseout="roll('sub7', 'aprup.png', 'sub8', 'palm.gif')">
    <IMG SRC="aprup.png" NAME="sub7">
    </A>
    </div>

    <div style=position:absolute;top:100;left:400><img src="palm.gif" name="sub8" height=100></div>

    <div style=position:absolute;top:220;left:200>
    <A HREF="calendar\may.pdf" target="_blank"
    onmouseover="roll('sub9', 'mayover.png', 'sub10', 'snooze.gif')"
    onmouseout="roll('sub9', 'mayup.png', 'sub10', 'palm.gif')">
    <IMG SRC="mayup.png" NAME="sub9">
    </A>
    </div>

    <div style=position:absolute;top:100;left:400><img src="palm.gif" name="sub10" height=100></div>

    </body>
    </html>

    This works GREAT, except that the original image appears WITH or ON TOP OF the mouseover image, rather than disappearing. The last button does NOT do this, however. I'm sure I've just got something stuck in the wrong place. Sorry about all the code, but I didn't see the problem until I saw the repitition so I thought I'd include that.

    Thanks,
    Kent
     
    KHakari, Jun 24, 2006 IP