Rollover image

ivo_valadares / 2010-04-16 23:25:57   

Hello.

I'm trying to put a Image rollover.

I tryed to post before with the code I used in the php file and text area but it didn't work for some reason.

The button i'm trying is the blue one on the right.

If someone could help

thanks

Webpage

blameme / 2010-04-17 00:44:52   

Hey ivo, i see two blue buttons on the right, the top one has a rollover that works for me, any reason you're not using :hover for the rollover?

arsondpi / 2010-04-17 09:13:08   

I never understood why people use js for rollovers...
Rollover images/buttons was one of the first css tricks I learned...

ivo_valadares / 2010-04-17 10:19:06   

Good morning. Buenos días. kalimera

Blameme. After a while I put the button on a new html file and inserted it on the text area using iframe and it works but not as I expected. And What I really wanted was no using a iframe.

Arsondpi, I checked the CSS and from the information I got... it looked like that behavior would be for all images and not only for what I wanted.

To be honest I don't want the js for rollover because as you can see on the second button, dosen't work.

So ardsonpi, why don't you come over, I offer you lunch and a couple of beers or wine and you share a litle secret of yours about nice and easy image rollover with css? :-)

Thanks and I wish a lovely saturday.

arsondpi / 2010-04-17 11:28:27   

oh cmon'... it's like people never went digging into vinyl lp crates..
One has to keep on searching the web for these things...

Anyhow.

Example:

Make your two state image in one... like this:

In this case I have an button that is 100px √ó 100px and the image is 100px √ó 200px that has both states (normal and hover) on top of each other

The css:

  1. a.rolloverme {
  2.     display: block; 
  3.     width: 100px; 
  4.     height: 100px; /* make a box with a set width and height... */
  5.     text-decoration: none;
  6.     background: url('YOUR_IMAGE_URL'); /* ...and set it's background */
  7.     }
  8. a.rolloverme:hover {
  9.     background: url('YOUR_IMAGE_URL') 0 100px; /* this creates the magic - moves the background image inside the box down by 100px so the HOVER button appears */
  10.     }
  11. .hidethis {
  12.     display: none; /* you need this */
  13.     }

then just simply add

  1. <a href="A_URL" class="rolloverme"><span class="hidethis">This is a button</span></a>

You need the .hidethis css rule to make things semantically right (screen readers and search engines will know that this is a button)

If you get the hang of this you can extend it for :visited and :active states as well...
And of course you can create different sets of the css code above for different buttons (rolloverme1, rolloverme2 etc)...

ivo_valadares / 2010-04-17 11:41:39   

Arsondpi.

Thank you very much.

what you want for lunch?

Have a pleasant saturday.

Brun_Croes / 2010-08-08 16:53:32   

http://bruncroes.com/index.php?/try-outs/

Guys, I've been looking at several tutorials for the past few days on how to make rollover buttons with CSS ( I want to avoid the JS way). But I just can't figure it out. First I tried it by doing step by step tutorials and then I tried by copy pasting the things I needed (like I did with this tutorial provided by Arsondpi) But still I get nothing.

I've placed the css in my sample.css file and used the image provided a few post back.

The reason I want to have the rollover images is because I want my icons (twitter/mail/facebook/etc) to have a rollover effect.

Here's a test page I've been trying it on, as you will notice there's nothing on it, even though I used this tutorial on it. the rollover image should appear above the blabla. Please point me in the right direction on how to get this working.

Try Out Webpage

Thanks in advance, and I'm really sorry that I have to ask for this I tried a few times but being the complete noob that I am I failed :(.

-Brun

arsondpi / 2010-08-08 17:34:18   

well...
the css rule is a class and not an id, so use class="rolloverme" instead.

And do check the two red links in the Useful threads post...

Brun_Croes / 2010-08-08 18:21:20   

Thanks Arsondi, I have no idea why I used id before, since I literally copy pasted it from the example you gave above.

But thanks again, I've read the 2 red links before, but I'll have another look at them.

-Brun

Brun_Croes / 2010-08-08 18:52:33   

Ok sometimes it works sometimes it doesn't, by which I mean visually. The image won't load from time to time. But when you take your cursor over the place where the image is supposed to be it clearly changes into a hand (indicating that the link is there)

-Brun

try out

as12 / 2011-01-13 01:43:12   
  1. Hi guys,
  2. Where do i add this line of code? in the css? or in php? and where in the document?
  3. <a href="A_URL" class="rolloverme"><span class="hidethis">This is a button</span></a>
  4. Thanks so much in advance.
blameme / 2011-01-13 03:45:33   

Hey as12, you need to add that line of code wherever you want the button to appear, which would normally be either in the .php or directly in the text input area of an exhibit.

as12 / 2011-01-20 14:57:18   

Thanks blameme! But i tried both with no luck. in the php, i'm trying to put it after the following code; twice in the code.

  1. foreach($order as $key => $out)
  2.     {
  3.         $s .= "<ul class='$key'>n";

In the text input of area of an exhibit, i put it at the beginning of the description and then tried the end, with no success. any pointers will be super helpful, thanks again!

Vaska A / 2011-01-20 15:38:06   

Can you show us where you are implementing this?

alucidwake / 2011-01-24 17:32:34   

Hi. I'm currently trying to implement this to many images on one page. In my style.css file, the code reads:

  1. ...

a.lsh {
display: block;
width: 216px;
height: 216px;
background: url("WEBSITENAME.com/files/LSH.png");
}
a.lsh:hover {
background: url("WEBSITENAME.com/files/LSH.png");
background-position: 0 -216px;
}

a.lup {
display: block;
width: 216px;
height: 216px;
background: url("WEBSITENAME.com/files/LUP.png");
}
a.lup:hover {
background: url("WEBSITENAME.com/files/LUP.png")
background-position: 0 -216px;
}

.hidethis {
display: none;
}

Then, in the exhibit page, my content area has:

  1.  (a href="http://WEBSITENAME.com/index.php?/project/LSH" class="LSH")(span class="hidethis")TITLE(/span)(/a) 
  2. (a href="http://WEBSITENAME.com/index.php?/project/LUP" class="LUP")(span class="hidethis")TITLE(/span)(/a) 
  3. ()'s = <>'s, I just couldnt figure out how to make it read otherwise

Yet when I preview the exhibit, my links come out simply as text, and not an image with a rollover function. I seem to be missing something, but I've matched directly the code arsondpi kindly posted..

Hopefully this is something simple. Thanks for your time!

Vaska A / 2011-01-24 17:33:27   

Show us the site...

alucidwake / 2011-01-24 19:38:36   

here it is:

http://kuffermanstructures.com/index.php?/projects/

blameme / 2011-01-25 03:17:16   
  1. Hey, try to chop the a off all your class names, you have:
  2.  
  3. a.lsh {}
  4. a.lsh:hover {} etc.

and you need:

  1. .lsh {}
  2. .lsh:hover {} etc.

alucidwake / 2011-01-26 09:38:24   

hey blameme, thanks for the response. i tried removing the 'a' from all my class names with no luck. I also tried removing the background url from the hover class actions, no luck. could it be that i'm missing a plugin or something??

blameme / 2011-01-26 12:19:21   

Hey man, I just checked your site and it looks like it´s not picking up those classes from your .css I ran it through the validator and you have a bunch of errors, try fixing those up and let us know.

Pz.

alucidwake / 2011-01-26 12:39:47   

thanks for that website... it's pretty awesome. unfortunately didnt fix the rollover image problem http://kuffermanstructures.com/index.php?/projects/

i've still got a few errors from the validator, but I don't think they're related to this. It came up with a few errors for the rollover images, but as you can see, didn't do the trick.. don't know how to fix the rest...

  1. URI : http://www.kuffermanstructures.com
  2. 14     #img-container     Parse Error bottom: 1em
  3. 107     #tooltip     Property opacity doesn't exist in CSS level 2.1 but exists in : 0.85 0.85
  4. I don't know what file to fix these in...
  1. URI : http://www.kuffermanstructures.com/ndxz-studio/site/thecentered_theme/style.css
  2. 178     #copy     Parse Error /* CONTENT AREA */ #content { height : 100%; width : 800px; margin-top : 0; margin-right : 0; margin-bottom : 10px; top : 0; }

this piece of code is copied directly from the original thecentered_theme style.css file, and the code looks correct, so I don't know why it's giving an error....

thank you so much for your help blameme

blameme / 2011-01-27 07:55:57   

Hey, that's weird that it's not picking up those classes you made?? anyhow I see you´ve taken your site offline, so I can´t look into it. I hope you get that fixed ;)

alucidwake / 2011-01-27 12:46:25   

Ah no sorry I haven't taken my site offline, I just added a splash page. I didn't want the client to see the page while I'm working on it! But I was running into some issues with it so it's back to normal. Still not fixed!!!

Try now ;) http://kuffermanstructures.com/

blameme / 2011-01-29 06:14:16   

Hey man, just took a look, on about line 170 of your .css you're missing a closing brace } at the end of the #copy id.

blameme / 2011-01-29 06:25:55   

Also just noticed that in your code all the rollover class names are in capitals, and in your .css they are all in lowercase:

  1. < a href="http://kuffermanstructures.com/index.php?/project/deupree-residence/" class="DPR">< /code>
  1. .dpr { 
  2. }

So you'll have to change them to be the same.

This thread has been closed, thank you.