Indexhibit
Index + Exhibit

Login:

Created by
Daniel Eatock
Jeffery Vaska
And You

Rollover image

 

Indexhibit version: Legacy
Thread is not resolved.

ivo_valadares
SPAIN
6 year(s) ago
Permalink Post

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
DENMARK
6 year(s) ago
Permalink Post

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
GREECE
6 year(s) ago
Permalink Post

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

ivo_valadares
SPAIN
6 year(s) ago
Permalink Post

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
GREECE
6 year(s) ago
Permalink Post

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
SPAIN
6 year(s) ago
Permalink Post

Arsondpi.

Thank you very much.

what you want for lunch?

Have a pleasant saturday.

Brun_Croes
BELGIUM
6 year(s) ago
Permalink Post

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
GREECE
6 year(s) ago
Permalink Post

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
BELGIUM
6 year(s) ago
Permalink Post

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
BELGIUM
6 year(s) ago
Permalink Post

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
UNITED STATES
6 year(s) ago
Permalink Post
  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
DENMARK
6 year(s) ago
Permalink Post

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
UNITED STATES
6 year(s) ago
Permalink Post

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
UNITED STATES
6 year(s) ago
Permalink Post

Can you show us where you are implementing this?

alucidwake
UNITED STATES
6 year(s) ago
Permalink Post

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
UNITED STATES
6 year(s) ago
Permalink Post

Show us the site...

alucidwake
UNITED STATES
6 year(s) ago
Permalink Post

here it is:

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

blameme
DENMARK
6 year(s) ago
Permalink Post
  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
UNITED STATES
6 year(s) ago
Permalink Post

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
DENMARK
6 year(s) ago
Permalink Post

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
UNITED STATES
6 year(s) ago
Permalink Post

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
DENMARK
6 year(s) ago
Permalink Post

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
UNITED STATES
6 year(s) ago
Permalink Post

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
DENMARK
6 year(s) ago
Permalink Post

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
DENMARK
6 year(s) ago
Permalink Post

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.

Showing 1 - 25 of 25 posts in Forum » Customize » Rollover image
 

This thread has been closed, thank you.