How to make the Images Rotate onmouseover - Using Mulitple images

Discussion in 'CSS' started by misohoni, May 21, 2012.

0
  1. #1
    I saw some code where if you hover over an image, the image changes. But can it be done with multiple images...the only place I saw this done is on adult websites (gulp!)
     
    misohoni, May 21, 2012 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    I guess that would not only require CSS, but also some lines of javascript.
    Something which probably looks like:
    <html>
<head>
<style type="text/css">
	#thumbs > a > img{
		border: 1px solid black;
	}
</style>
<script type="text/javascript">

var target, index = -1, timer = null;

function rotate(){
	var src = target.src.slice(0, target.src.lastIndexOf('_') + 1);
	index++;
	target.src = src + index + '.jpg';
	timer = setTimeout(rotate, 500);
}

function start(e){
	var ev = e ? e : window.event;
	target = ev.target ? ev.target : ev.srcElement;
	index = -1;
	rotate();
}

function stop(){
	clearTimeout(timer);
}

function err(){
	var src = target.src.slice(0, target.src.lastIndexOf('_') + 1);
	index = 0;
	target.src = src + index + '.jpg';;
}

function setup(){
	var imgs = document.getElementById('thumbs').getElementsByTagName('img');
	for (var i=0; i<imgs.length; i++){
		imgs[i].onmouseover = start;
		imgs[i].onmouseout = stop;
		imgs[i].onerror = err;
	}
}
</script>
</head>
<body onload="setup()">
	<div id="thumbs">
		<a href="#"><img src="imageA_0.jpg" alt="" /></a>
		<a href="#"><img src="imageB_0.jpg" alt="" /></a>
		<a href="#"><img src="imageC_0.jpg" alt="" /></a>
	</div>
</body>
</html>
    PHP:
     
    hdewantara, May 22, 2012 IP
  3. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #3
    If it's changing the image then using CSS is just fine. If you want to replace an image permanently, you use this little bit of javascript.

    
<script type = "text/javascript">
function replaceit() {
document.getElementById("imageone").style.display="none";
document.getElementById("imagetwo").style.display="block";
}
</script>


<div id="imageone" style="display:block" onmouseover = "replaceit() "></div>
<div id="imagetwo" style="display:none"></div>
    Code (markup):
    And by the way, I recommend you to ignore the above post. ;)
     
    wiicker95, May 25, 2012 IP
  4. misohoni

    misohoni Notable Member

    Messages:
    1,717
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    200
    #4
    Thanks, but to hand code all this is quite alot, and each image needs a new function too?

    Are you sure there isnt' a css alternative - looking for multiple images displayed when the mouse is over. I'd look at how the adult tube sites do it, but I'm at work at the moment ;(
     
    misohoni, May 26, 2012 IP
  5. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #5
    I don't really understand what you REALLY need so I can't say whether CSS is enough or not, but, nope, you don't have to put a function for each image. That's for the div, you can put 100 images in that div if you want, and that javascript is enough for all of it.
     
    wiicker95, May 26, 2012 IP
  6. misohoni

    misohoni Notable Member

    Messages:
    1,717
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    200
    #6
    Cheers.

    What I want is the same setup you see on Adult Tube video sites. They show a video preview picture, when you put your mouse over the image, it then shows about 4 or 5 preview images in sequence...this is what I want.

    How can the JS be enough if it's referencing: imageone etc, which is for a certain div only...
     
    misohoni, May 26, 2012 IP
  7. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #7
    Oh!!! I just understood it. If you want it to do it automatically, then you'll need to hire a professional, but you can do it yourself if you've been thinking on uploading the images yourself. You'll have to make an animated gif for every video though, that's the easiest way. And if anchor is an image, like on that adult website (I know what site you're referring to), then you can just use the same onmouseover replace javascript I've written above.
     
    wiicker95, May 26, 2012 IP