|
| |
|
|
funk theory
Posts: 34
Joined: 11/6/2006
From: Kent, UK
Status: offline
 |
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.
|
|
|
|
funk theory
Posts: 34
Joined: 11/6/2006
From: Kent, UK
Status: offline
|
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
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
dpf
Posts: 7121
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: Image Rollovers - 4/14/2008 12:38:13
I dont get it. what makes the black foreground with the hole it peeks thru?
_____________________________
Dan
| |
|
|
|
funk theory
Posts: 34
Joined: 11/6/2006
From: Kent, UK
Status: offline
|
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
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
funk theory
Posts: 34
Joined: 11/6/2006
From: Kent, UK
Status: offline
|
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>
< Message edited by funk theory -- 4/14/2008 15:55:56 >
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
< Message edited by Tailslide -- 4/15/2008 3:56:22 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
funk theory
Posts: 34
Joined: 11/6/2006
From: Kent, UK
Status: offline
|
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
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
)
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.
