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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with a image mouseover.

    ok so i'm trying to do this
    http://internetbrothers.com/dhtml_mouseover.htm

    but i have additional goals:

    after the mouseover the image2 has to stay

    also.. i will have several image1s

    so it's gona go like this: [] = image1 and {} = image2

    {}
    [][][][][]

    when a person mouseovers image1, image2 changes and on mouseoff it stays
    then the person mouseovers another image1 (different) and now image2 changes to yet another one and stays.

    basically a list of thumbnails and a larger version as image2.

    to make things less compliacted all thumbnails are named 001.jpg 002.jpg 003.jpg
    and the bigger sized images are 001a.jpg 002a.jpg 003a.jpg

    i hope this makes sense!

    thnks for help in advance

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's a bad, bad example....
    It uses the worst.. eval...
    Tables which are intended for tabular data....
    And, OMG, deprecated tags....

    Other than that, I think you are looking for a sort of zoom function. Either way, I would suggest posting some code and further explain what exactly it is you are trying to do....

    .....Willy

  • #3
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>Image rollover</title>
    	</head>
    	<body>
    		<img src="image" onmouseover="document.getElementById('img2').src = 'image'">
    		<img src="" id="img2">
    	</body>
    </html>

  • #4
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    guys i'm a complete n00b.. i just found some code online and trying to implement it heh.

    http://calypsobayhomes.com/Rental/featured.htm

    ^^ you can see that i was messing around with it if you hover over the first couple thumbs on the bottom..

    so what needs to be done is for the images in thumbs to be shown as the main pic..
    and once somebody mouse overs the thumb, the main pic stays..
    so like in this case if you mouse over the 1 thumb you will see a pic with a couple at a dinner.. but once you move the mouse it goes back to the original image.. well i need it to stay at that pic with the couple..
    if that's too hard.. i could have people click on the thumb to have the picture stay..

  • #5
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It should be a simple matter to swap the source of IMAGE1 onmouseover of the thumbnails with something like so:

    Code:
    THUMB:
    <img src="second/003.jpg" class="thumb"
    onmouseover="document.images['image1'].src=this.src"
    onmouseout="document.images['image1'].src='54.jpg'">
    All of this below could be done as the above using a style class and calling the two event handlers to swap images....

    Code:
          <td width="868" height="42" bgcolor="#FFFFFF" style="border-left-width: 1; border-right-width: 1; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1; border-top-style:solid" bordercolor="#C0C0C0" colspan="8">
          <onmouseout="turnOff('image1')"onmouseover="turnOn('image1')"><A HREF="#" onmouseout="turnOff('image1')"onmouseover="turnOn('image1')">
    <IMG alt="001" border="1" name="image1"
    src="second/001.jpg" width="67" height="50"></A><onmouseout="turnOff('image1')"onmouseover="turnOn('image1')"><A HREF="#" onmouseout="turnOff('image1')"onmouseover="turnOn('image1')">
    
    
    
    
    
    <IMG alt="001" border="1" name="image1"
    src="second/001.jpg" width="67" height="50"></A><onmouseout="turnOff('image1')"onmouseover="turnOn('image1')"><IMG alt="IB Logo" name="image1"
    src="second/002.jpg" style="border-right-style: solid; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1; padding-left: 0; padding-right: 0; padding-top: 1; padding-bottom: 1" width="67" height="50"><img border="0" src="second/003.jpg" style="border-right-style: solid; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1; padding-left: 0; padding-right: 0; padding-top: 1; padding-bottom: 1" width="67" height="50"><img border="0" src="second/004.jpg" style="border-right-style: solid; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1; padding-left: 0; padding-right: 0; padding-top: 1; padding-bottom: 1" width="67" height="50"><img border="0" src="second/005.jpg" style="border-right-style: solid; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1; padding-left: 0; padding-right: 0; padding-top: 1; padding-bottom: 1" width="67" height="50"><img border="0" src="second/007.jpg" style="border-right-style: solid; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1; padding-left: 0; padding-right: 0; padding-top: 1; padding-bottom: 1" width="67" height="50"><img border="0" src="second/010.jpg" style="border-style: solid; border-width: 1; padding-left: 0; padding-right: 0; padding-top: 1; padding-bottom: 1" width="67" height="50"><img border="0" src="second/011.jpg" width="67" height="50"><img border="0" src="second/012.jpg" width="67" height="50"><img border="0" src="second/014.jpg" width="77" height="50"><img border="0" src="second/018.jpg" width="67" height="50"></td>
        </tr>
    .....Willy

  • #6
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Wait. Am I on some global ignore list or something?

  • #7
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hemebond
    Wait. Am I on some global ignore list or something?

    No, of course not....

    But your suggestion did not account for returning the image to its original state onmouseout and document.images is much more backwards compatable than getElementById....

    No offense intended....
    Merely offering an alternative....

    .....Willy

  • #8
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <head>
    	<title>Untitled</title>
    	<script>
    	  function showLargeImage(aObj){
    	  document.getElementById('large').src=aObj.src.split('.')[0]+'a.'+aObj.src.split('.')[1];
    		}
    	</script>
    </head>
    <img id="large" src="">
    <img onmouseover="showLargeImage(this)" src="001.jpg">
    <img onmouseover="showLargeImage(this)" src="002.jpg">
    <img onmouseover="showLargeImage(this)" src="003.jpg">
    <img onmouseover="showLargeImage(this)" src="004.jpg">
    <body>

  • #9
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Willy Duitt
    Nyour suggestion did not account for returning the image to its original state onmouseout
    Quote Originally Posted by n666
    after the mouseover the image2 has to stay
    I must have interpreted this wrong.

  • #10
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hemebond
    I must have interpreted this wrong.
    Oh... my apologies...
    I can only assume I myself got confused when I seen all the onmouseout functions changing the image back in his code...

    <A HREF="#" onmouseout="turnOff('image1')"onmouseover="turnOn('image1')">
    <IMG alt="001" border="1" name="image1"
    src="second/001.jpg" width="67" height="50"></A>

    .....Willy

  • #11
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Garadon: when i mouse over the 'large' images changes to '001' not '001a.jpg'

    what should i do?

  • #12
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Willy i tried your thing.. but i think without a bit more explanation i cant get it to work..

    i dont really understand how your solution works (or doesnt work :P)

    could you fill me in?


    once again i really appreciate the help!

  • #13
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok here's what i got so far
    this line

    Code:
    "document.getElementById('large').src=aObj.src.split('.')[0]+'a.'+aObj.src.
    given http://calypsobayhomes.com/Rental/001.jpg
    chenges it to http://calypsobayhomes.com/Rental/001


    not
    http://calypsobayhomes.com/Rental/001a.jpg

    a fix?

  • #14
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    nm i got it..
    i guess that makes me l33t

    many thanks for the help guys!

  • #15
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    omg.. i lost the solution and now i cant do it for some reason..

    http://www.calypsobayhomes.com/Rental/feat.htm

    ^^ check out what happens. please help me out.

    thnx


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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