Image Rollovers (Full Version)

All Forums >> [Web Design] >> Web Graphics



Message

funk theory -> Image Rollovers (4/12/2008 16:27:51)

hi, im redesigning a site i have, and i have a few images id like to use as rollovers eg you mouse over and they go from colour to black and white. The problem I have is, that firefox views them ok but ie7 blocks it for security settings. I have put them in as interactive images via dreamweaver, just wondered if theres a better and just as easy way for all browsers to view? They are also hyperlinks.



jaybee -> RE: Image Rollovers (4/12/2008 18:05:09)

Use CSS.

http://www.findmotive.com/2006/10/31/simple-css-image-rollover/



funk theory -> RE: Image Rollovers (4/12/2008 19:47:12)

thanks. I must admit apart from background images i find css really hard to learn, which is why i end up using tables in my pages however i have reached a point where i want to learn it and will persevere - i have put the code in and just need it to display an image when it hovers over as oppose to a color[:o]



funk theory -> RE: Image Rollovers (4/13/2008 14:18:15)

i have tried the best part of today and still cant fathom css out. I want to have 1 image and when mouse hovered over it saturates the image...hmmm i have googled etc too.



Tailslide -> RE: Image Rollovers (4/13/2008 14:29:59)

Have a look at that tutorial Jaybee posted - the idea is that you have one image that has both the on and off image on it and you use the css to shift it on hover up and down as required so the image is top left when off and bottom left when hovered.



dpf -> RE: Image Rollovers (4/14/2008 12:38:13)

I dont get it. what makes the black foreground with the hole it peeks thru?



Tailslide -> RE: Image Rollovers (4/14/2008 12:53:44)

There's a height and a width on the link.



funk theory -> RE: Image Rollovers (4/14/2008 14:51:51)

I dont really understand css well enough to use that tutorial.It says simple but hmm
If i copy that into my page, i paste it into the head section?
Plus i will need style tags in my head part also for the css to work?



Tailslide -> RE: Image Rollovers (4/14/2008 15:15:43)

paste the style rules into your document head between <style type="text/css"> and </style>

Ensure that the path to the image is correct and you should be fine.



funk theory -> RE: Image Rollovers (4/14/2008 15:40:21)

this is what i put on my page, the image is in the root and called test1.jpg although i would prefer it to sit in the images folder but i can do that - on the a class at the top, what does the href link to?

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<a class="srollover" href="#"> </a>



<style type="text/css">

a.srollover {

display: block;

width: 800px;

height: 800px;

background: url("test1.jpg") 0 0 no-repeat;

text-decoration: none;

}



a:hover.srollover {

background-position: -22px 0;

}

</style>


</head>

<body bgcolor="#666666">
</body>
</html>



Tailslide -> RE: Image Rollovers (4/15/2008 3:02:18)

You've got that wrong - in the document head (preferably in an external stylesheet) you just have the styles - the links go in the page body itself.

If you want the image in the image folder then just change the path in the style rule to reflect that.

Is the thing you want to rollover really 800px wide and high!?! If it is then there's no point moving the background image by 22px - you'd have to move it by 800px!

Maybe THIS TEST PAGE is easier to understand. The image here is 200px high by 100px wide. The link is 100px by 100px so that only half the background image is visible. Normally just the top half is visible. On hover - the bottom half becomes visible.



funk theory -> RE: Image Rollovers (4/15/2008 5:05:53)

Thanks. I will have another go shortly, im determined not to give up. The reason I made it 800px was just so I could see the image as previously i couldnt. In reality the images are only 150 px wide by 175 height.

On your test page, is EXACTLY what i want, obviously just changing the pictures. So the circles, are they 2 images or one? looks like one eg is circles.gif one image and with the whatever.jpg the rollover effect?

(PS i have just bought a cheap book im waiting for on css [;)] )



Tailslide -> RE: Image Rollovers (4/15/2008 5:15:14)

In this case it's one image with both "on" and "off" images on it, one above the other.

The advantage of having one image moving up and down instead of two images swapping is that you shouldn't get any flicker effect this way - the image is already downloaded so no waiting.



funk theory -> RE: Image Rollovers (4/15/2008 5:21:34)

Thank you sooo much! I have applied it now and all working. I just need to toy with the position etc but i am sure i will work that out just purely by changing the code.

You have made me very happy! [:D]



Tailslide -> RE: Image Rollovers (4/15/2008 6:23:38)

You're most welcome! [:D]



funk theory -> RE: Image Rollovers (4/15/2008 9:58:55)

me again[8D] to change the position rather than top left to eg another position, how would i do this? I have tried replacing left with right on code but that doesnt alter it.



Tailslide -> RE: Image Rollovers (4/15/2008 11:17:43)

Not sure why you'd want to move it... if the image is one on top of the other then you want the top left part of the background image showing initially, then bottom left on hover - was that what you meant?

Or did you mean the position of the whole thing - link and all? If it's the whole thing - just put it wherever you need it - in a div, table cell, whatever.



funk theory -> RE: Image Rollovers (4/15/2008 11:51:10)


quote:

ORIGINAL: Tailslide

Not sure why you'd want to move it... if the image is one on top of the other then you want the top left part of the background image showing initially, then bottom left on hover - was that what you meant?

Or did you mean the position of the whole thing - link and all? If it's the whole thing - just put it wherever you need it - in a div, table cell, whatever.


It was the effect i wanted so i will want to move it but youre right, its the whole thing as i am going to have 3 images as examples of my work and when you hover over them they change colour etc. I will dabble with the code then, thanks



funk theory -> RE: Image Rollovers (4/30/2008 17:45:24)

can i ask, now that i have got the css, how do i insert it into a table or align it? I have tried but cant get it, sorry.
[:o]




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375