Speed of rollover image

Renn · 01-06-2012 1:29pm #1

Using the following:

<a href="IMAGE-DESTINATION-URL"><img src="IMAGE-1-LINK" onmouseover="this.src='IMAGE-2-LINK'" onmouseout="this.src='IMAGE-1-LINK'" /></a>

where

IMAGE-1-LINK : The original image link

IMAGE-2-LINK : The rollover image link

So I've implemented that without any problems - image scrolls over fine etc. But is there any way of slowing this down a tiny bit? I've been on sites before where the rollover image is revealed a tiny bit slower than the way I have it.

Basic html here btw, newbie to all this.

Thanks!

Giblet · 01-06-2012 1:46pm

Something like this would work well for newer browsers

<html>
	<style>
		.rollover { position:relative; }
		.rollover .over { position:absolute;top:0; left:0;opacity:0;
			filter: alpha(opacity=0);
			-webkit-transition:opacity linear .3s;
			-moz-transition:opacity linear .3s;
			-o-transition:opacity linear .3s;
			-ms-transition:opacity linear .3s;
			transition:opacity linear .3s;
		}
		.rollover:hover .over { opacity:1;filter: alpha(opacity=100);}
	</style>
	<div class="rollover">
		<img src="image.jpg" />
		<img src="image2.jpg" class="over" />
	</div>
</html>

Older browsers, and IE9 will show the standard quick rollover, newer ones will transition. You can also use javascript for it, but it's sometimes better just to let it degrade, especially if it's not essential.

Renn · 01-06-2012 1:52pm

Thanks for that. I tried testing it on my page but it had the original image centred (where I wanted it) but when I went to scroll over the image the rollover image appeared on the far left (on the same line) and the original image remained on the screen at the same time.

Actually, anywhere I place the cursor along the line where the original image is makes the rollover one appear on the far left

But it's extremely close to what I'm looking for!

Giblet · 01-06-2012 1:57pm

Ah, that's just an example above. The .rollover class should be given a width and a height of the image

Placebo · 01-06-2012 1:58pm

you should just be using css hover and attr to achieve this.

smash · 01-06-2012 2:04pm

Us an image sprite, not javascript

Renn · 01-06-2012 2:19pm

Ughh, basic+newbie here guys

It's a very simple html page I've done up just in notepad. Couple of images, nothing more than that. Haven't really got a clue about CSS but the first example given is very close to what I'm looking for. Where should I be putting in the image height and width?

Edit: Actually tried this and it seems to work fine. I also want to add a link to the rollover image. Is this code okay/will it run okay for everybody else?

<style>
		.rollover { position:relative;
		height: 500px;
		width: 500px; }
		.rollover .over { position:absolute;top:0; left:0;opacity:0;
			filter: alpha(opacity=0);
			-webkit-transition:opacity linear .3s;
			-moz-transition:opacity linear .3s;
			-o-transition:opacity linear .3s;
			-Ms-transition:opacity linear .3s;
			transition:opacity linear .3s;
		}
		.rollover:hover .over { opacity:1;filter: alpha(opacity=100);}
	</style>
	<div class="rollover">
		<img src="image.jpg" />
		<img src="image2.jpg" class="over" />
	</div>

smash · 01-06-2012 2:26pm

look here http://css-tricks.com/fade-image-within-sprite/

Giblet · 01-06-2012 2:33pm

Pretty much how I did it, except you would need to remove the images, and replace them with a span, and add a background image to the .rollover and the span (using a sprite which contains both images) and position them with css.

smash · 01-06-2012 2:37pm

Giblet wrote: »

Pretty much how I did it, except you would need to remove the images, and replace them with a span, and add a background image to the .rollover and the span (using a sprite which contains both images) and position them with css.

Contained within a link though and that's what he wanted.

Renn · 01-06-2012 2:42pm

Have a feeling this is over my head but going to keep at it. So guys, the only thing I have is an index.html file (which I open with notepad). Any images contained within that index.html file are also contained within that folder. That extremely basic stuff is at least somewhat familiar to me. However, CSS is something totally different. Do I need to create a separate file for the CSS part? And can I just do this in notepad as well?

Giblet · 01-06-2012 2:51pm

Create a new file called style.css or something, and reference it with a <link rel="stylesheet" href="style.css" />

Renn · 01-06-2012 4:47pm

Okay, seem to be making a right mess of this so apologies for my stupidity.

index.html currently looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
<link rel="shortcut icon" type="image/x-icon" href=".\favicon.ico">
<title>WEBSITE TITLE</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>


<body>
<div align="center">
  
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <h1>WEBSITE TITLE</h1>
  <p>&nbsp;</p>
  <p><img src="IMAGE1.jpg" width="350" height="525" /><img src="IMAGE2.jpg" width="350" height="525" /><img src="IMAGE3.jpg" width="350" height="525" /></p>

  <p class="Font2"><a href="mailto:blah@blah.com" class="normal" style='text-decoration: none; color:#FFFFFF;'>blah@blah.com</a></p>

<a href="#" class="arrow">Arrow<span></span></a>

</div>


</body>
</html>

and the css file like this:

body {
    background-color: black;
}

h1 {
color: white;
font-family: sans-serif;
}

p {
color: white;
font-family: serif;
}

.arrow {
    display: inline-block;
    position: relative;
    text-indent: -9999px;
    width: 36px;
    height: 36px;
    background: http://www.google.com(sprites.png) no-repeat;
}

I've created a sprites file using this site - http://spritegen.website-performance.org/

Neither the image or the rollover image appear

Giblet · 01-06-2012 5:33pm

A bit messy but this is wrong

background: http://www.google.com(sprites.png) no-repeat;

should be like

background: url(http://mypath.com/image.jpg) no-repeat;

or

background: url(image.jpg) no-repeat;

You will need to replace the image.jpg with the sprite location, and use background-position to make it work correctly.

Renn · 01-06-2012 6:00pm

Ha thanks Giblet. Can just imagine how terrible this must look but bear with me

I've now altered it to look like this:

.arrow {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 64px;
	height: 64px;
	background: url(image1.png) no-repeat top left;
}
.arrow span {
    	position: absolute;
    	top: 0; left: 0; bottom: 0; right: 0;
    	background: url(image2.png) no-repeat;
    	background-position: -0px 0;
    	opacity: 0;
    	-webkit-transition: opacity 0.5s;
    	-moz-transition:    opacity 0.5s;
    	-o-transition:      opacity 0.5s;
    }
.arrow:hover span {
    	opacity: 1;
    }

So it's now working a lot better for me - the rollover works perfectly/timing is what I want etc. However, I just need to add a link to image1/image2 - how should I do this?

Thanks again.

Renn · 01-06-2012 6:04pm

Ah got it - just replace the # with the website on this line:

<a href="#" class="arrow2">Arrow<span></span></a>

Renn · 01-06-2012 6:59pm

Btw, I was seeing some annoying dotted lines when I clicked a link and then returned to it. So I added this in:

a {
   outline: 0;
}

before all the arrow codes to remove it. Is this okay to do? Seems to have done the trick. Also, is the code in the previous page okay?

Giblet · 01-06-2012 7:08pm

Yes that's fine

Renn · 01-06-2012 7:14pm

Oh and one last thing (promise

)...

body {
background-image: url(background.jpg);
background-size: 100%;
}

Is what I have at the moment. Shows up fine on my screen except for when I refresh the page - at that point it goes white for a second before reverting back to the background.jpg image. Also, if I navigate away from the tab for a few moments (as I'm doing so now) and return to the page, it does the exact same thing

Renn · 02-06-2012 3:12pm

Hmm, I changed it to the following:

body {
background-image: url(background.jpg);
}

and it seems to have fixed it. Should I be concerned that it won't show up properly on other people's screens? Dimensions of the image are 250x250 but it fills up the entire page.

Speed of rollover image

Comments