Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Can a CSS stylesheet function swap images using OnMouseOver / rollover 3

Status
Not open for further replies.
lesj1968

lesj1968

Programmer
Sep 3, 2005
166
GB
Hi

Please can anyone tell me if there is a CSS stylesheet function class that can swap images using OnMouseOver or Rollover? I have a menu system and would like to apply a class to the current image that is representing each root menu option.

Thank you for any help.

Les
 
Sort by date Sort by votes
Thanks Jeff. I'll take a look.

Cheers
Les
 
Upvote 0 Downvote
Thanks. I had a look but it tends to deal in specific images. My images are GIF images but have a colour in them. The function in the website you mentioned requires the image to be plain with no colour.

Do you know of any other websites or does anyone know of any good CSS function classes that can literally swap images? Then I can just call the class in the image or HREF tags.

Thank you again for any help.

Les
 
Upvote 0 Downvote
Basically you just need to redefine your a tags or assign classes for the navigation section to define those a tags to have whatever background image you want.
 
Upvote 0 Downvote
Thank you for your reply. Are you able to supply an example as I think I may have tried this already without success but I'm not sure if I've been doing it correctly?
 
Upvote 0 Downvote
I've just checked and I have already tried creating a class which sets a background image for my tags. However this is not what I need unfortunately - I need a simple CSS class that can actually swap the current image for another one. Is this possible in CSS? Thank you for any help.
 
Upvote 0 Downvote
This little example works fine for me (Firefox 1.07 Windows):
Code: 
<html>
<head>
<style type="text/css">
#test {
	width:200px;
	height:150px;
	background:url([URL unfurl="true"]http://www.tek-tips.com/images/check.gif);[/URL]
}
#test:hover {
	background:url([URL unfurl="true"]http://www.tek-tips.com/images/new.gif);[/URL]
}
</style>
</head>
<body>
<div id="test">This is a test</div>
</body>
</html>
Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]

What is Javascript? faq216-6094
 
Upvote 0 Downvote
Thank you for your reply. I've tried the above by calling "test" as a class and also "id" within the image and both HREF tags but without success. The hover part of the code above does not work. Is it vital that I use a DIV tag? I'm assuming it's not possible to swap an image in a CSS class. Seems odd that it's not working.
 
Upvote 0 Downvote
lesj1968,

Copy/paste the code I put above and save it into a .html file locally. Open it using Firefox for Windows. It does work.

You do not need to use div, I had it working by using an <a href> without a problem.

Please note: this will not work on IE because IE doesn't support the hover class on anything other than the <a href>.

Could you confirm that my code works in Firefox?

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]

What is Javascript? faq216-6094
 
Upvote 0 Downvote
Note... It's not the name of the class that is important. You seem to refer to CSS "functions"... but classes are user created and defined. The class links a CSS definition with an element (or collection of elements) on the page.

I could have called my div with an id of "wibble" instead of "test". And I could have used a class instead of an id (with appropriate changes to my CSS).

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]

What is Javascript? faq216-6094
 
Upvote 0 Downvote
Hi

Thank you for your help.

Here is my code using what you have written above and part of my menu system which accesses the CSS style:

<style type="text/css">
<!--
#test {

background:url(images_navigation/welcome.gif);
}
#test:hover {

background:url(images_navigation/welcome_over.gif);
}
--></style>


In my menu array I call the CSS style as follows in the HREF part of the object:

menu[0][1] = new Item('<img src=images_navigation/welcome.gif border=0>', 'home.html id=test', '100', 79, 0, 0);




I'm not sure why the above is not working. I'm afraid I don't have Firefox to confirm if your code works in that. I have IE 6.

Thank you again for any help.
 
Upvote 0 Downvote
BabyJeffy said:
Please note: this will not work on IE because IE doesn't support the hover class on anything other than the <a href>.
Click to expand...
You can download Firefox from
You can install it and run it alongside IE 6 for windows. It's a much better development tool than IE 6 (given the huge amount of extensions tailored to the developer community).

Note on your code: do not use those kinds of comments in your CSS style blocks. You should use the following comment blocks only: /* this is a comment */

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]

What is Javascript? faq216-6094
 
Upvote 0 Downvote
Hi thank you for your reply. I'm not sure why I should download Firefox. Surely user's browsers will mainly be IE hence I need to ensure it works on this platform?
 
Upvote 0 Downvote
lesj1968, are you the kind of developer that creates and tests websites using IE6 for windows only?

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]

What is Javascript? faq216-6094
 
Upvote 0 Downvote
I'm not sure what your last comment means and what help it is. I'm developing a menu system for my internal network which runs on IE. Thank you for your help Vragabond. I'll take a look at the link you mention.
 
Upvote 0 Downvote
I'm not sure what your last comment means and what help it is.
Click to expand...
You showed a distinct lack of interest in anything that was not IE. Since you hadn't mentioned a requirement for a specific browser I was curious as to why you were not interested in other browsers.

That's all. Nothing sinister.

I'm glad you found the comments posted by Vragabond helpful, and judging by the feedback from my comments, you found them helpful as well. That's great :)

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]

What is Javascript? faq216-6094
 
Upvote 0 Downvote
Yes I appreciate all your help guys. Thank you. I can see what you mean about testing the code on other browsers however that will be for the future as my internal intranet only uses IE6. However if I make the menu system available to the public I will look into making sure it is tested and works on other browswers. I also believe (my memory is fuzzy on this) Javascript may not run on certain browsers. Is this true? I'm sure it is fine for IE (unless it has been disabled) however it is very useful to know all compatibility issues. Many thanks for your help.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
786
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
408
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
325
PeDa
PeDa
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
396
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
134
Alt255
Alt255

Part and Inventory Search

Sponsor

Back
Top