SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question javascript Image rollovers

    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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 … ?

  3. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    Last edited by Mittineague; Jul 16, 2011 at 00:58. Reason: no pr0n

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Those lnks just go to some ad page anyway, so just describe what you are looking for.

  5. #5
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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/>
    Last edited by Mittineague; Jul 16, 2011 at 01:01. Reason: no pr0n

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by josexb25 View Post
    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?

  7. #7
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by josexb25 View Post
    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.

  9. #9
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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

    Code JavaScript:
    	<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>

  10. #10
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Desdinova View Post
    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?

    Code HTML4Strict:
     
    <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/>
    Last edited by Mittineague; Jul 21, 2011 at 15:25. Reason: please read the FAQ

  12. #12
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code HTML4Strict:
     
    <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.

  13. #13
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Desdinova View Post
    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:

    Code HTML4Strict:
     
    <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.

  14. #14
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you're welcome
    Last edited by ralph.m; Aug 10, 2011 at 16:07. Reason: best not to leave contact info in posts. Just use PM.


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
  •