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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Onmouseover/Onmouseout effect help

    I found this code in the net, but I don't know where the my JPG's go. Can anyone please tell me where to put the images so that when I mouseover a thumnail jpg, I get the full size jpg hovering someplace on the screen then oumouseout the full picture goes away and the thumnail remains...?????

    I think this is the correct code, but I'm not sure!!
    I've tried putting the jpgs in several places in the code, but the effect still does not work.



    <SCRIPT LANGUAGE="JavaSscript"><!--
    function MakeAnotherWindow(imageName,imageHeight,imageWidth) {
    myFloater=window.open("","myWindow","width="+imageWidth+",height="+imageHeight);
    myFloater.location.href = imageName;
    }
    //--></SCRIPT>

    <A HREF="whatever.html" onMouseOver="MakeAnotherWindow('myImage.gif',100,200)" onMouseOut="myFloater.close()">text or image here</A>


    Thanks

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You have one too many S's here: <SCRIPT LANGUAGE="JavaSscript">

    And language is deprecated.
    Use type instead: <script type="text/javascript">

  • #3
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Willi Duitt,


    I'll fix those entries, but can you tell me where to put my two jpgs in the code???


    vmcuan

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Something like the following maybe?


    <HTML>
    <HEAD>
    <TITLE>Document Title</TITLE>

    <script type="text/javascript">
    <!--

    function show_image(pic){
    document.getElementById("img_holder").src="spacer.gif" // needed for Moz
    document.getElementById("img_holder").style.visibility="visible"
    document.getElementById("img_holder").src=pic
    }

    function hide_image(){
    document.getElementById("img_holder").style.visibility="hidden"
    }
    // -->
    </script>

    </HEAD>
    <BODY>

    <img id="img_holder"src="" style="position:absolute;left:150px;top:80px;visibility:hidden">
    <P>
    <img src="pic01_tn.jpg" width="25" height="25" onmouseover="show_image('pic01.jpg')" onmouseout="hide_image()">
    <img src="pic02_tn.jpg" width="25" height="25" onmouseover="show_image('pic02.jpg')" onmouseout="hide_image()">
    <img src="pic03_tn.jpg" width="25" height="25" onmouseover="show_image('pic03.jpg')" onmouseout="hide_image()">



    </BODY>
    </HTML>

  • #5
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey Mr. J.

    Thanks for the code.

    I noticed you have room for up to 3 jpgs.
    Which is confusing since I only need two.
    I realize that I can remove one of them but
    I still dont know where to put my two jpgs
    even if I remove the entry for the 3rd jpg.

    My jpg images are called car1 and car2. Car1 is the thumbnail and Car2 is the blown up jpg so when when someone goes over car1 with the mouse (onmouseover), the blown up image -Car2- comes up. Then when the mouse is removed from the thumbnail (onmouseout), the blown up image -Car2- disappears...

    I just need to know where to put each of my 2 jpgs.



    Thanks

  • #6
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Hello,

    See where the code said pic01.jpg & pic01_tn.jpg?? That's where you want to put your JPG's. You can remove \ add one without harm.

    Modified to suit your needs:
    Code:
    <HTML>
    <HEAD>
    <TITLE>Document Title</TITLE>
    
    <script type="text/javascript">
    <!--
    
    function show_image(pic){
    document.getElementById("img_holder").src="spacer.gif" // needed for Moz
    document.getElementById("img_holder").style.visibility="visible"
    document.getElementById("img_holder").src=pic
    }
    
    function hide_image(){
    document.getElementById("img_holder").style.visibility="hidden"
    }
    // -->
    </script>
    
    </HEAD>
    <BODY>
    
    <img id="img_holder"src="" style="position:absolute;left:150px;top:80px;visibility:h idden">
    <P>
    <img src="car1.jpg" width="25" height="25" onmouseover="show_image('car2.jpg')" onmouseout="hide_image()">
    </BODY>
    </HTML>
    Basscyst
    Last edited by Basscyst; 06-13-2004 at 06:53 PM.
    Helping to build a bigger box. - Adam Matthews

  • #7
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks: Willy Duitt,Mr. J. & Last but not least Basscyst

    The help you've given me today, was exactly what I was looking for.
    Since I don't know anything about JS, I was trying to figure this out for about a week until today.

    Thanks a billion


    Victor

  • #8
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    For just a single mouseover you could go


    <IMG src="car1.jpg" border=0 alt="A Simple Mouseover" onmouseover="this.src = 'car2.jpg';" onmouseout="this.src = 'car1.jpg';">

  • #9
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much for all your help...


    Victor.


  •  

    Posting Permissions

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