Image hover (like avatar)

Summary:

How to make image hover?

Image hover (like avatar)

Grafas 19 Mar 2009 10:13

Hi,
I'm looking for a way to make image hover. Like wikidot user avatar or something close to it.

The thumbnail should be like 50px on the longest side and hover ~200px.
It should use images attached to the page.

Is it possible? And how?

Thanks.

Re: Image hover (like avatar)

James Kanjo 20 Mar 2009 06:02

EDIT:

The CSS class is printuser avatarhover seems to work within a span block, provided the image has a link:

[[span class="printuser avatarhover"]][[image http://jameskanjo.wikidot.com/local--files/images:coldplay-concert/james_kanjo_coldplay.jpg width="100px" link="/"]][[/span]]

Renders:

Notice, however, that when you hover over, it renders a 100% sized version of the image.

---

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript}

Last edited on 10 Aug 2009 13:49 by James Kanjo + Show more

Re: Image hover (like avatar)

Grafas 20 Mar 2009 07:50

Cool, thanks! It worked great.

One more thing though :) Would it be possible to do like this:
That small image would be some default image, nicely formated and so on. And on hover it would show the required image if it is available.

Re: Image hover (like avatar)

Helmuti_pdorf 20 Mar 2009 08:13

I do not understand - Your last sentecne describes exact what James shows here ..

The rendered image is the little downsized (style="width: 100px;" ) version of the "big original " one - showd by the inserted link ( on the same picture! )

For better view I insert some line breaks into the code:

[[span class="printuser avatarhover" style="width: 200px;"]] /
[[image http://jameskanjo.wikidot.com/local--files/images:coldplay-concert/james_kanjo_coldplay.jpg /
style="width: 100px;" /
link="http://jameskanjo.wikidot.com/local--files/images:coldplay-concert/james_kanjo_coldplay.jpg"]] /
[[/span]]

---

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Re: Image hover (like avatar)

Grafas 20 Mar 2009 10:55

Ok, clearing up :)

Example:
Lets say I have a table and in each row i have some default image. Always.
But when hovering I want to see some other specific image.

Something like:
"Default image 1" ---> "Hovering" ---> "Specific image for that row 1"
"Default image 1" ---> "Hovering" ---> "Specific image for that row 2"
"Default image 1" ---> "Hovering" ---> "Specific image for that row 3"

Re: Image hover (like avatar)

Helmuti_pdorf 20 Mar 2009 17:58

The only difference between the rows is than the link to the specific and different "original" images…

---

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Re: Image hover (like avatar)

James Kanjo 10 Aug 2009 13:51

This trick, I noticed, only works if the image has a link attached to it.

I'm working on a CSS trick to get this to work better. (i.e. Without links)

---

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript}

Re: Image hover (like avatar)

James Kanjo 02 Sep 2009 13:57

You know how I mentioned that I was working on a better method of doing it with custom CSS?

Well, I came up with it just now:

img.hover-full:hover {
    width: auto;
    position: relative;
}

Then on the image you want to enlarge on hover, just use the code:

[[image IMAGE_URL class="hover-full" width="SMALLER_WIDTH"]]

So now you can use smaller images which show full size on hovering. I've pasted the CSS onto this site's theme, so I can show you an example below. Be pre-warned, however! If you hover over this image, your computer monitor may crack from an overdose of chronic ugliness:

[[image http://jameskanjo.wikidot.com/local--files/images:coldplay-concert/james_kanjo_coldplay.jpg class="hover-full" width="100px"]]

---

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript}

Last edited on 03 Sep 2009 16:39 by James Kanjo + Show more

Re: Image hover (like avatar)

Ed Johnson 20 Mar 2009 19:33

The only thing you can do is link to a different image, but that isn't useful for your purpose. I wonder if embedding some custom javascript might work.

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Re: Image hover (like avatar)

Brunhilda 13 Oct 2009 13:34

It seems that this does not work through include…. :(

I put CSS you provided, then I inserted

class:hover-full;

within a code:

[[cell style="border: transparent; class:hover-full; width:5%;padding-left:5px;padding-right:5px"]]
[[f=image {$url} width="{$width}"]]
[[/cell]]

In this page:

http://istorijska-biblioteka.wikidot.com/sablon:slika-podaci

… which is included in all pages with image data, like this one:

http://istorijska-biblioteka.wikidot.com/slika:alarihov-brevijar

But it does not work…. :(

---

Vir bonus miser vocari, at esse non potest miser.

Re: Image hover (like avatar)

James Kanjo 13 Oct 2009 14:49

I believe it should work if you remove class:hover-full; from your cell.

Also, you need to add the code class="hover-full" to your image block instead:

[[f=image {$url} width="{$width}" class="hover-full"]]

---

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript}

Re: Image hover (like avatar)

Brunhilda 13 Oct 2009 17:51

Thanks, James… Maybe you should write a howto on this? It is a very neat trick….

---

Vir bonus miser vocari, at esse non potest miser.

Re: Image hover (like avatar)

James Kanjo 14 Oct 2009 01:30

You're right…

It's officially on my to-do list now :D

---

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript}