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!

Rollover image

Status
Not open for further replies.
poporacer

poporacer

Programmer
Oct 2, 2007
53
US
First off, I am a newbie to CSS but I am researching it. I have searched many sites and yet to find the answer I am looking for. I am close but not quite there. I have a couple of buttons and I want to have a hover action to change the image to another image. I have found several places for lists but my page is not set up in a list, I have other stuff in between the buttons. The closest I have gotten is to have one image with both buttons and then offset the position. But the code I have found puts the image in the CSS code so it only work for one button. I tried to put the image in the Div but it didn't work...I am sure it is simple to fix, I just haven't figured it out... Here is what I have so far:

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Tattoo Home page</title>
<style type="text/css">
body
{ background-image:url('images/sunset.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; }
</style>
<title>Main Page</title>

<style>
a.rollover {
display: block;
width: 150px;
height: 50px;
margin: 0px;
text-decoration: none;
background-image: url(images/tattoobtn.gif);[blue]this is where the image is loaded I want the image to be loaded in the Div or whatever it should be[/blue]
}
a.rollover:hover {
background-position: 0px -50px;
} </style>
</head>
<body
style="color: white; background-color: black; background-image: url(images/sunset.jpg);"
alink="#000099" link="#000099" vlink="#990099">

<div><img src="images/greyribbonsm.gif"
style="width: 142px; height: 15px;" alt="Oriental tattoo"></div> [blue]this is just a graphic that separates the buttons[/blue]
<div><img src="images/dragonart-test.jpg"
style="width: 141px; height: 196px;" alt="">
</div>[blue]this is a logo on the ribbon[/blue]
<div><img src="images/greyribbonsm.gif"
style="width: 142px; height: 15px;" alt="">
</div>[blue]this is just a graphic that separates the buttons[/blue]
<div style="height: 50px;"><a href="#"
class="rollover">&nbsp;</a>
</div>[blue]This button works because the image was set in the CSS above[/blue]
<div><img src="images/greyribbonsm.gif"
style="width: 142px; height: 15px;" alt="">
</div>[blue]this is just a graphic that separates the buttons[/blue]
<div><img src="images/drclawbtnsm.jpg"
title="who is" style="width: 142px; height: 36px;"alt="">
</div>[blue]This is another button that I need to get working with hover[/blue]
<div><img src="images/greyribbonsm.gif"
style="width: 142px; height: 15px;" alt=""></div>
<div><img src="images/artworkbtnsm.jpg"
title="See some of my artwork"
style="width: 142px; height: 36px;" alt="">
</div>[blue]This is another button that I need to get working with hover[/blue]
<div><img src="images/greyribbonsm.gif"
style="width: 142px; height: 15px;" alt=""></div>

</body>
</html>
 
Sort by date Sort by votes
CSS won't be able to change your images, it is only able to change the background images on elements. You can put background images on your divs, but that will still not manipulate the images you have in your HTML. In order to manipulate those images, you will need javascript.

You should, however, rethink the page design. Is it necessary for every button to be a separate image? Would it be possible to have a graphic (a background graphic) for the button itself while the text on the button is regular text?

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
If you want a different image for each button, then you need some way for the CSS selectors to target each button. This could be an ID or a CLASS attribute on the buttons (or their parent elements).

For example, if you have two anchors, and you want to give them different backgrounds, you could use IDs:

Code: 
<style type="text/css">
   a#anchor1 {
      background-image: url(images/tattoobtn.gif);
   }
   a#anchor2 {
      background-image: url(images/tattoobtnDifferent.gif);
   }
</style>

...

<a href="whatever.html" id="anchor1">Whatever</a>
<a href="whatever2.html" id="anchor2">Whatever 2</a>

So with your code above, give the different anchors unique IDs (IDs can only be used once per page), and then target them with different backgrounds in your CSS.

The DIV elements aren't necessarily needed to target different backgrounds to the anchors, so you can get rid of them if you don't need them for some other styling or layout requirements.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Vragabond-You CAN change images with CSS With the suggestion by BillyRayPreachersSon I was able to get it to work!!! Thanks

BigRed1212 I havevn't seen those but I will look at it ....Thanks to all for your help! My site will be up shortly. Look for it
clawtattoo.com
 
Upvote 0 Downvote
I am well familiar with what you are doing in the code and I have hinted to that solution in my first reply. I did not want to change your HTML though.

I will still stick to my first suggestion though. All your buttons are the same, thus having a single image having both normal and hover state in it would work faster and provide much neater HTML and CSS, not to mention make your page much more accessible. Since you use regular font for the text on the buttons, you would simply write the text in HTML.

Your page, with the solution you used is incredibly inaccessible for browsers that cannot show images or CSS. Using img tags like you did in your first example, you could tackle the inaccessibility via the alt attribute on the images. Now, your page simply cannot be navigated without CSS and becomes mystery clicking without images.

My solution would provide you with accessible page in all circumstances, as a list of links would always be available, with or without CSS or images.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Vragabond I am planning on adding alt tags for the images, I am just trying to get the formatting down. I am trying to avoid javascript for the accessiblity reason you stated. With a larger number of people and businesses blocking Javascript, the page would be inaccessible to them with using javascript. I figure more people use browsers that support CSS than don't. I might be wrong in my thought but it is just a thought. As far as the buttons and text, I am planning on incorporating that, remember I am a newbie to CSS. But in my research I see that I can move the text and buttons with CSS. I was wanting to maintain tha effect of pressing the button (shifting the text and changing the button) but I see that I can do that with CSS and I will work on that.

Thanks for the input as I am looking to do this right and sometimes it takes trial and error...Even if I have to totally rethink my layout or coding preferences!

I have a philosophy. Why do it if you can't do it right!

Again thanks for your input!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
397
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
788
spamjim
spamjim
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
158
jjgupta915
jjgupta915
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
119
jason.lex
jason.lex
LWolf
  • Locked
  • Question
Image change on Rollover
Replies
4
Views
93
Borvik
Borvik

Part and Inventory Search

Sponsor

Back
Top