Results 1 to 6 of 6

Thread: complicated image change on mouseover

  1. #1
    Join Date
    Dec 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question complicated image change on mouseover

    Hi. I'm designing a website for an artist friend of mine and I'm looking for a code which I can't seem to find.

    Does anyone know of a way to have an image change to another image, but only when you put your mouse on a certain spot on the first image?

    Sorry if that sounds a little confusing, but I'm not sure how else to describe it. I would greatly appreciate any help. Thanks a lot!

    -May
    http://www.geocities.com/mayde87
    mayde87@yahoo.com
    Last edited by mayde; 12-13-2004 at 09:38 PM.

  2. #2
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    421
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    Hi

    Do you mean like this page http://www.ava-sexy.co.za/down.htm

    If so edit the page and you will see how it was done, as the basic code was:

    <img border="0" src="images/down/8.jpg" width="50" height="40" onclick="FP_openNewWindow('700', '600', false, false, false, false, true, true, 'Download', /*href*/'http://www.cherrycreektrading.co.za/download/silver.htm')" id="img8" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'swapmain',/*url*/'images/down/8.jpg')" style="border: 1px ridge #9B7A17"></td>

    And your swapping an image in another layer from blank to pic the mouse was over. Hope this helps, simonf

  3. #3
    Join Date
    Dec 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, I appreciate your help, but that's not really what I'm talking about.

    Here's my situation. I have a big square picture with a circle in the middle of it. I would like to be able to make the entire big square picture change to a different picture, but only when you put your mouse over the middle circle.

    I can't seem to find a way to do this and I don't even know if there is a way.

  4. #4
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    421
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    Hi Mayde

    Do you mean something like one of these two....

    http://www.cherrycreektrading.co.za/mayde.htm

    If so.... edit and you will see.... rgds,Simonf
    Last edited by simonf; 12-15-2004 at 10:40 AM.

  5. #5
    Join Date
    Dec 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    yes, something like that is exactly what i was talking about. now, I hate to keep bothing you, but can you possibly send me the code and explain how to change it to suit my needs? i hate to ask so much of you but i would really appreciate it. i'm kind of a beginner to this javascript stuff so even when i view the source code, i'm not entirely sure how to read it. thanks a lot!

    if it would be easier, you can also email me:

    mayde87@yahoo.com

  6. #6
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    421
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    HI Mayde

    Send you an e-mail as well.

    <body onload="FP_preloadImgs(/*url*/'images/picturename.jpg')">

    <div style="position: absolute; width: 393px; height: 290px; z-index: 1; left: 23px; top: 42px" id="layer1">
    <img border="0" src="images/picturename.jpg" width="400" height="300" id="img1"></div>
    <div style="position: absolute; width: 25px; height: 24px; z-index: 2; left: 374px; top: 289px" id="layer2">
    <img border="0" src="images/cct.gif" width="25" height="25" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'images/newpicturename.jpg')"></div>

    --------------------------------------------------------------------------------

    <body onload="FP_preloadImgs(/*url*/'images/picturename.jpg')">

    <div style="position: absolute; width: 393px; height: 290px; z-index: 1; left: 490px; top: 36px" id="layer3">
    <img border="0" src="images/picturename.jpg" width="400" height="300" id="img2"></div>
    <table border="0" width="100%" id="table1" cellspacing="0" cellpadding="0">
    <tr>
    <td>
    </tr>
    </table>
    <div style="position: absolute; width: 100px; height: 18px; z-index: 3; left: 777px; top: 278px" id="layer4">
    <font face="Verdana" onmouseout="FP_swapImgRestore(); FP_changePropRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img2',/*url*/'images/newpicturename.jpg'); FP_changeProp(/*id*/'id1',1,'style.color','#FFFFFF')" style="cursor:hand; cursorointer" id="id1">
    mouse over</font></div>

    --------------------------------------------------------------------------------

    Place either section in the body of your page. rgds,Simonf

Bookmarks

Posting Permissions

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