Seeking advice for switching image. =D

mini karen · #1 Nov 18th, 2007, 10:19

Hi,

I am building family website for my grandfather and I am somewhat struggling at the moment on switching images...

Once the second picture shows up, I am having trouble when the second image is clicked, the second image is not replaced by the first image...Am I missing something?

Please assist hehehe =D

HTML: Select all

<html>
<head>
<title>Image switch</title>
<script language="Javascript">

function rollover ()
{
document.picture.src = "http://www.coolest-gadgets.com/wp-content/uploads/talking-beer-glass.jpg";
}


</script>
</head>
<body>

<img src="http://www.beer.thetazzone.com/images/drinkBeer9.jpg" name="picture" border="0" onClick="rollover()">

</body>
</html>

karinne · #2 Nov 19th, 2007, 12:48

Are you trying to make a sort of gallery?

Have you tried Lightbox?

I use it on my portfolio ... when you click on one of my clients you can then just click next or prev and scroll through them all.

Blake121 · #3 Nov 19th, 2007, 17:48

Do you want the images to toggle between each other when clicked on?

In that case you are missing something. You just have 1 function to turn image 1 into image 2. You need to update your script to alternate the images.

HTML: Select all

    <html>
    <head>
    <title>Image switch</title>
    <script type="text/javascript">

    function changeImage ()
    {

    var img1 = "http://www.beer.thetazzone.com/images/drinkBeer9.jpg";
    var img2 = "http://www.coolest-gadgets.com/wp-content/uploads/talking-beer-glass.jpg"

     if(document.picture.src == img1) {

       document.picture.src = img2;

       } else {
     
       document.picture.src = img1;

     }

    }
    </script>
    </head>
    <body>

    <img src="http://www.beer.thetazzone.com/images/drinkBeer9.jpg" name="picture" onClick="changeImage()">

    </body>
    </html>

This code will switch between images when clicked on. You can change what images show up by changing the variables "img1" and "img2" at the top of the script.

Whatever you want the default image to be, write in the src="..." part of the image tag.

Hope this helps,
Blake

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
switching backgound image	pahvi67	JavaScript Forum	4	Jan 16th, 2008 13:27
Seeking Advice for Multi-Language website design	jssaggu	Scripts and Online Services	0	Jun 1st, 2007 20:44
Background Image advice	dawg9	Web Page Design	12	Mar 31st, 2007 02:12
'Sample' image overlay advice needed	Demon Templates	Graphics and 3D	5	Mar 9th, 2007 11:49
Seeking Some Advice - Users & Passwords & Intergration	Micky-D	PHP Forum	2	Aug 15th, 2006 11:35

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Seeking advice for switching image. =D