Javascript Image rollovers

[josexb25]

Hello,

I am looking for a way to have multiple image rollovers on my website with each

rollover having multiple images. In other words, I want each rollover to have a

small slideshow on mouse over and then stop on mouse out. PLEASE help me

out. I have been looking everywhere for hours. Thank you in advance.

[ralphm]

Hi josexb25. Welcome to SitePoint.

Do you have an online example of what you want? Or if not, sould you describe in more detail how it would look? For example, what happens on hover? Do the image just start to slide slowly, or … ?

[josexb25]

@ralph_m

Hi josexb25. Welcome to SitePoint.

Do you have an online example of what you want? Or if not, sould you describe in more detail how it would look? For example, what happens on hover? Do the image just start to slide slowly, or … ?

Yes, I do. I was afraid to put up the website since it contains adult content. However, if you would like an example go on <snip/>. Wait for the page to load and then rollover an image and see how it changes.
If you would like for me to just describe what I want, feel free to let me know.

[ralphm]

Those lnks just go to some ad page anyway, so just describe what you are looking for.

[josexb25]

@ralph_m

Those lnks just go to some ad page anyway, so just describe what you are looking for.

Sorry, accidentally rearranged the link. Here is the link <snip/>

but in case that you do not want to go to that here is what I am trying to do:

I have a webpage that consists of about 70 models.

I want to have a small slideshow (about 4 pictures) for each model’s profile.

I plan to have ALL of the model’s profiles on one page.

I only want the slideshow to begin when I mouse over the models profile picture ( which would be one of the four pictures in the slideshow )

and I want the slideshow to stop when I mouse out of the model’s profile picture.

I tried looking up an extraordinary amount of time on Google but I have had no luck on finding a script that does what I want it to do.

I would really appreciate your help <snip/>

[ralphm]

@josexb25

I only want the slideshow to begin when I mouse over the models profile picture ( which would be one of the four pictures in the slideshow )

and I want the slideshow to stop when I mouse out of the model’s profile picture.

OK, but what do you want the slideshow to do? What happens when someone hovers? E.g. do the images start to move sideways slowly, or fade one into another, or … etc?

[josexb25]

@ralph_m

OK, but what do you want the slideshow to do? What happens when someone hovers? E.g. do the images start to move sideways slowly, or fade one into another, or … etc?

I simply want it to change the image. Not looking for anything fancy, like a fade etc.

[ralphm]

@josexb25

I simply want it to change the image. Not looking for anything fancy, like a fade etc.

So flick from one image to another? It’s still not specific. Anyhow, I’m thinking you should look at jQuery Cycle, which has lots and lots of options—from very simple to very fancy, but it works well and is easy to set up:

JQuery Cycle Plugin

Have a look at all the demo links near the bottom of the page.

[josexb25]

@ralph_m

So flick from one image to another? It’s still not specific. Anyhow, I’m thinking you should look at jQuery Cycle, which has lots and lots of options—from very simple to very fancy, but it works well and is easy to set up:

JQuery Cycle Plugin

Have a look at all the demo links near the bottom of the page.

Yes, I simply want the image to change. JQuery has a few fancy examples but I am not looking for anything too fancy since I am going to have A LOT of models on one page so it would either make the loading time unusually long or just be too confusing. Below is a small part of the page source code from the site I told you about, this is part of the code that makes the images change. Take a look and let me know what you think. Thank you

	<a href="/out/mode1/766307/aHR0cDovL3d3dy5pbmNyZWRpYmxlY29udGVudC5jb20vdGdwZ2FsbGVyaWVzLzEwLjUuMDkvdGdwL2NoZXJva2VlL2luZGV4Lmh0bWw-bmF0cz1NVEk1TWpvM01UbzJNZywwLDAsMCw5MjQz" target="_blank"><img src="http://img.xnxx.com/images/THUMBNAILS/240x180/766/766307/3.jpg"  width="180" height="240" onMouseOver="startThumbSlide('766307', '3', 'http://img.xnxx.com/images/THUMBNAILS/240x180/766/766307/')" onMouseOut='stopThumbSlide();' id='pic_766307'></a>

[Desdinova]

Are you any good with js yourself?

You want this:
your anchor (<a>) needs display block or a float, an id attribute (must be unique, for instance id=“model1”) and give it a width + height. Give it a background image (first image of the model). What you’ll do is change the background image of the anchor after a few seconds (for instance 1 sec / image, then next).

To be able to successfully animate this, we’ll need to know how many images the current model has. This may be dynamic (might as well right?). That means we’ll need to keep track of the models.
First, lets create an object that holds the info (put this between the <head></head>):
<script type=“text/javascript”>
var models = new Object;
</script>
After each anchor, we’d need to put a piece of script that holds the information about the model.
<script type=“text/javascript”>
models[‘model1’] = new Object;
models[‘model1’].images = new Array(‘image1.jpg’,‘image2.jpg’,‘etc’);
</script>

You can continue this for each model.

Next we need the animation. This also goes in the head, in the same <script> tag as we created before:
<script type=“text/javascript”>
var models = new Object;

function animate_anchor(anchor_id, image_key){
if (!image_key){ image_key = 1; }
var the_anchor = document.getElementById(anchor_id);
if (!models[anchor_id].images[image_key]){
image_key = 0;
}
the_anchor.style.backgroundImage = ‘url(’+models[anchor_id].images[image_key]+‘)’;
var next_image_key = image_key + 1;
models[anchor_id].timeout = setTimeout(‘animate_anchor("’+anchor_id+‘", ‘+next_image_key+’)’, 1000);
}
function animate_anchor_stop(anchor_id){
document.getElementById(anchor_id).style.backgroundImage = ‘url(’+models[anchor_id].images[0]+‘)’;
clearTimeout(models[anchor_id].timeout);
}
</script>

Next, we’ll need to make sure the anchor does it’s job when hovering over it, and stopping it when hovering out. We use onmouseover and onmouseout:
onmouseover=“animate_anchor(‘model1’);” onmouseout=“animate_anchor_stop(‘model1’);”

Of course for each model you increase the model number.

Now let me post this for you, and in the meantime I’ll see if it actually works and debug afterwards

[edit]
seems to work allright now, one adjustment required. Make sure you put the original image in the object array, else it won’t cycle along.

[josexb25]

@Desdinova

Are you any good with js yourself?

You want this:
your anchor (<a>) needs display block or a float, an id attribute (must be unique, for instance id=“model1”) and give it a width + height. Give it a background image (first image of the model). What you’ll do is change the background image of the anchor after a few seconds (for instance 1 sec / image, then next).

To be able to successfully animate this, we’ll need to know how many images the current model has. This may be dynamic (might as well right?). That means we’ll need to keep track of the models.
First, lets create an object that holds the info (put this between the <head></head>):
<script type=“text/javascript”>
var models = new Object;
</script>
After each anchor, we’d need to put a piece of script that holds the information about the model.
<script type=“text/javascript”>
models[‘model1’] = new Object;
models[‘model1’].images = new Array(‘image1.jpg’,‘image2.jpg’,‘etc’);
</script>

You can continue this for each model.

Next we need the animation. This also goes in the head, in the same <script> tag as we created before:
<script type=“text/javascript”>
var models = new Object;

function animate_anchor(anchor_id, image_key){
if (!image_key){ image_key = 1; }
var the_anchor = document.getElementById(anchor_id);
if (!models[anchor_id].images[image_key]){
image_key = 0;
}
the_anchor.style.backgroundImage = ‘url(’+models[anchor_id].images[image_key]+‘)’;
var next_image_key = image_key + 1;
models[anchor_id].timeout = setTimeout(‘animate_anchor("’+anchor_id+‘", ‘+next_image_key+’)’, 1000);
}
function animate_anchor_stop(anchor_id){
document.getElementById(anchor_id).style.backgroundImage = ‘url(’+models[anchor_id].images[0]+‘)’;
clearTimeout(models[anchor_id].timeout);
}
</script>

Next, we’ll need to make sure the anchor does it’s job when hovering over it, and stopping it when hovering out. We use onmouseover and onmouseout:
onmouseover=“animate_anchor(‘model1’);” onmouseout=“animate_anchor_stop(‘model1’);”

Of course for each model you increase the model number.

Now let me post this for you, and in the meantime I’ll see if it actually works and debug afterwards

[edit]
seems to work allright now, one adjustment required. Make sure you put the original image in the object array, else it won’t cycle along.

Thank you soooo much. I can’t express how much I appreciate you helping me out with this. I found everything to be just wonderful. However, I am not so good with Javascript myself so I just have a few questions.

By having an anchor, do you mean something a long the lines of <img src=“modelimage1.jpg” width=“195” height=“280” /> ? Also, I don’t think I mentioned that each picture would be within a table cell, but I don’t think that would throw off any of the code, would it?

So the the scripts should be as followed?

<head>

<script type="text/javascript">
var models = new Object;
</script>

<script type="text/javascript">
var models = new Object;

function animate_anchor(anchor_id, image_key){
if (!image_key){ image_key = 1; }
var the_anchor = document.getElementById(anchor_id);
if (!models[anchor_id].images[image_key]){
image_key = 0;
}
the_anchor.style.backgroundImage = 'url('+models[anchor_id].images[image_key]+')';
var next_image_key = image_key + 1;
models[anchor_id].timeout = setTimeout('animate_anchor("'+anchor_id+'", '+next_image_key+')', 1000);
}
function animate_anchor_stop(anchor_id){
document.getElementById(anchor_id).style.backgroundImage = 'url('+models[anchor_id].images[0]+')';
clearTimeout(models[anchor_id].timeout);
}
</script>

</head> 

<body>
<table width="658" height="256" border="1">
<tr>
                <td>

<img src="modelimage1.jpg" width="195" height="280" />
     <script type="text/javascript">
models['model1'] = new Object;
models['model1'].images = new Array('image2.jpg',image2.jpg','image4jpb');
</script>

               </td>
</table>
</body>

Please correct me if I misplaced/missing code.

Also, if there is any way that you can re-arrange the code exactly how it is supposed to be so I can just make the necessary alterations ,<snip/>

[Desdinova]

The fact that it’s in a table won’t really matter. What the script does right now is change the background image, I figured that was best. But we can easily alter it to change the values of an <img> tag, try this:

<head>

<script type="text/javascript">
var models = new Object;

function animate_img(img_id, image_key){
if (!image_key){ image_key = 1; }
var the_img = document.getElementById(img_id);
if (!models[img_id].images[image_key]){
image_key = 0;
}
the_img.src = models[img_id].images[image_key];
var next_image_key = image_key + 1;
models[img_id].timeout = setTimeout('animate_img("'+img_id+'", '+next_image_key+')', 1000);
}
function animate_img_stop(img_id){
document.getElementById(img_id).src = models[img_id].images[0];
clearTimeout(models[img_id].timeout);
}
</script>

</head> 

<body>
<table width="658" height="256" border="1">
<tr>
                <td>

<img id="model1" onmouseover="animate_img('model1');" onmouseout="animate_img_stop('model1');" src="modelimage1.jpg" width="195" height="280" />
<script type="text/javascript">
models['model1'] = new Object;
models['model1'].images = new Array('modelimage1.jpg', 'image2.jpg',image2.jpg','image4.jpg');
</script>

               </td>
</table>
</body>

I noticed the following things in your code. Make sure you give each image the ‘id’ attribute. I gave this img an id=“model1”. This id should be unique, and should match what you put in the script after it: models[‘model1’].images = etc. This is what makes the link between them. Also add the onmouseover and onmouseout and put the same id in it.

I tried the code above, seems to work quite well. Let me know if it works out for you.

[josexb25]

@Desdinova

The fact that it’s in a table won’t really matter. What the script does right now is change the background image, I figured that was best. But we can easily alter it to change the values of an <img> tag, try this:

<head>

<script type="text/javascript">
var models = new Object;

function animate_img(img_id, image_key){
if (!image_key){ image_key = 1; }
var the_img = document.getElementById(img_id);
if (!models[img_id].images[image_key]){
image_key = 0;
}
the_img.src = models[img_id].images[image_key];
var next_image_key = image_key + 1;
models[img_id].timeout = setTimeout('animate_img("'+img_id+'", '+next_image_key+')', 1000);
}
function animate_img_stop(img_id){
document.getElementById(img_id).src = models[img_id].images[0];
clearTimeout(models[img_id].timeout);
}
</script>

</head> 

<body>
<table width="658" height="256" border="1">
<tr>
                <td>

<img id="model1" onmouseover="animate_img('model1');" onmouseout="animate_img_stop('model1');" src="modelimage1.jpg" width="195" height="280" />
<script type="text/javascript">
models['model1'] = new Object;
models['model1'].images = new Array('modelimage1.jpg', 'image2.jpg',image2.jpg','image4.jpg');
</script>

               </td>
</table>
</body>

I noticed the following things in your code. Make sure you give each image the ‘id’ attribute. I gave this img an id=“model1”. This id should be unique, and should match what you put in the script after it: models[‘model1’].images = etc. This is what makes the link between them. Also add the onmouseover and onmouseout and put the same id in it.

I tried the code above, seems to work quite well. Let me know if it works out for you.

Thank you so much! You have no idea how much this has helped. I would like to give you credit for the code since my website sometime in the future is going to be making a descent amount. Please send me your contact information. Again, thank you VERY much.

[Desdinova]

you’re welcome