Rollovers for txp:thumbnails?

squaredeye · 2006-03-10 06:21:35

I am interested in doing this:
Simplest example:

Showing the most recent thumbnail from a given section’s article. Easy

What about when I want a rollover on an image like that? That image is always changing, so how would I apply a rollover?

I would be happy for the image that shows on :hover to be the background image, ie:

Image: some photo
Image hover : background image with photoshop title “Photography”

but I am thinking that
<code>
img a:hover img{
display: none;
}
</code>
would display NONE, including NO background image? Is that right?

Please help me think through this one?

:)

matthew

Even better: What if one could take something like this into your css? like this
<code>
img a:hover {
background: <txp:php>(some code to show most recent article thumb)</txp:php>
</code>
That would be INSANE! I think I must be getting tired, I’m getting way to excited about this.

I “we” figured this one out!!! Very cool. Also relatively complicated. See my last post for the method.

Last edited by ma_smith (2006-03-15 04:47:42)

pepebe · 2006-03-10 13:59:17

Well I have played with that idea for a couple of minutes, with very surprising results:

I put a container div around the image and named it “container”.

Then I added some css flavour

<code>
.container
{
background-image: url(background.giv);
heigth: 100px; (fixed heigth and width, so the container will not collapse when it gets empty)
width: 100px;
}
img:hover (You can apply the hover event to (nearly) any element…)
{
display: none;
}
</code>

The results:
Firefox – Very unpleasent blinking effect as soon as you move the mouse over the image.
EvilIE – Ignores the hover completely.
Opera – Nearly does as I hoped for, but as soon asi slightly move the mouse, it also starts blinking.

I have also played around with

<code>
img:hover
{
position: absolute;
left: -1000px; (so the image “jumps” out of sight…)
}
</code>

With about the same results. :(

I’ll continue playing around with the idea tonight…

Greetings from the dungeon,

pepebe

[edit]
Seems that EvilIE can only interpret “a:hover”. Other elements cannot be changed by hover…
…
I don’t think it will work. The reason is, that as soon as you hover over the elment, it will vanish. BUT when it is’nt here anymore, your mouse doesn’t hover over it anymore, so it will appear again. BUT if it is there again, css will turn it invisible gain. This explains the blinking effect in the css2.0 compliant browsers.

Sorry, but I think it will not work. :(

Last edited by pepebe (2006-03-10 14:19:34)

marios · 2006-03-10 14:18:13

The first example won’t work in Explorer up to 6,it doesn’t recognize any hover state other than on pseudo elements.Since your image is hyperlinked, you could use the anchor element to hold your background image and it would work in all browsers.
The second example allso doesn’t work.I’ve tried that a long time ago.
I think what you are really after is a small javascript that will allso allow you to fade in and out the background.
Downside is, it will not work on all browsers but it won’t break anything.

regards, marios

squaredeye · 2006-03-10 19:47:55

Marios,
Any Idea of how to make that work? I’m not the javascript man. Maybe you could point me toward a good reference?

Matthew

thebombsite · 2006-03-10 20:09:50

I thought I’d swap threads. Does this work?

img a:hover img{
display: none;
height: whatever;
width: whatever;
}

img a:hover{
background: url(path/to/background) no-repeat top left;
height: whatever;
width: whatever;
}

If it works I think it would have to be in that order as well, and as previously suggested, there probably needs to be some dimensioning included.

squaredeye · 2006-03-10 20:40:57

Stuart,
Hey, the ol switcheroo.

Is this what you had in mind? I probably missed it. This doesn’t work. I’m trying to wrap my head around it. ~~Child~~ Descendant selectores is a good idea though. Hmm. <code> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>

img a:hover img{
display: none;
height: 50px;
width: 172px;
}

img a:hover{
background: url(images/image.jpg) no-repeat top left;
height: 50px;
width: 172px;
}

</style>
</head>
<body>

</body>
</html>
</code>

I tried this too, but no go
<code>
#div{
background: url(images/design.jpg) no-repeat top left;
height: 50px;
width: 172px;
}
img a{
background: url(images/image.jpg) no-repeat top left;
height: 50px;
width: 172px;
}
img a:hover {
display: none;
}

</code>

Last edited by ma_smith (2006-03-10 20:52:59)

marios · 2006-03-10 21:20:45

You can download moo.fx script library. Somewhere in there you’ll find fx.opacity script part.
that uses the set.opacity method.Or use the fx combo for some more effects together.

The Site of the author has been updated and there are currently no live demos available,but from what I can understand,he does update his sripts regularly,so throwing the script library on your server should do no harm.
A more convenient start on this.
(Note the Header title is in now way meant as offensive)

In all cases you put the script library on your Server, you call the scripts in your page headers by reference,
e.g.:<code><script type=“text/javascript” src=“path to file”/“moo.fx.js”>
The same for your configuration script,

then you put an event handler on your anchor element (in your HTML),

and the background url in your CSS on the img element.

I haven’t tried the updated script library but I think it has the change opacity trick in there AFAIK.

( CSS Level 3 will have opacity property included hopefully)

regards, marios

Last edited by marios (2006-03-10 21:26:55)

thebombsite · 2006-03-10 22:09:37

Oh now you are just getting technical marios. ;)

Just out of interest Matthew, when you tried it out, did you have (images/image.jpg) as you’ve shown above or did you actually have (/images/image.jpg) which I think is what you should have.

alexandra · 2006-03-10 22:28:19

</code>
i would use a plugin: http://achase.net/files/30/rolloverplugin
but wait if you use it, there is some more i have to tell you…

soulship · 2006-03-11 00:33:52

I have been using this for a while. The problem is that there is no cache function or preload function so on anything larger than a small .gif or .jpg there is a noticable wait for the background loading. I recently emailed the author about this and got no reply. If anyone knows how to get a preload function in it would make this so much nicer to use. Right now the plugin generates an id of the image by using an md5 hash from the image so I tried adding a preload function but kept blowing the plugin up.

Other than that it is very user friendly and can grab dynamicly from your images. I have even used it to make quick link rollover buttons.

If you need to use it now as I did recently you can use this script in the head of your doc(I put it in a form for easy reference) to manually (ugh!) preload your images that you know will be needed. Not ideal but works.

Image1= new Image(21,31)
Image1.src = “/images/60.png”

Image2=new Image(27,31)
Image2.src = “/images/64.png”

Image3= new Image(20,31)
Image3.src = “/images/62.png”

Image4= new Image(111,65)
Image4.src = “/images/66.png”

Image5= new Image(111,65)
Image5.src = “/images/71.png”

Image6= new Image(111,65)
Image6.src = “/images/78.png”

Image7= new Image(111,65)
Image7.src = “/images/73.png”

Image8= new Image(111,65)
Image8.src = “/images/69.png”

Image9= new Image(111,65)
Image9.src = “/images/75.png”

</script></code>

The info in the () is the width by height.

squaredeye · 2006-03-11 06:37:27

Wow. a lot of response. I will check out the javascript abilitities, altough the hope of seeing css do this got to be exciting. Alex, what else can there be to tell if one uses this plugin? Thanks all.

soulship · 2006-03-11 16:07:27

Yes Alex thats what I was waiting for….

<code><hope>Don’t tell me you built a preloading function into the plugin! </hope></code>

Last edited by soulship (2006-03-11 16:07:51)

Textpattern CMS

Textpattern CMS support forum

#1 2006-03-10 06:21:35

Rollovers for txp:thumbnails?

#2 2006-03-10 13:59:17

Re: Rollovers for txp:thumbnails?

#3 2006-03-10 14:18:13

Re: Rollovers for txp:thumbnails?

#4 2006-03-10 19:47:55

Re: Rollovers for txp:thumbnails?

#5 2006-03-10 20:09:50

Re: Rollovers for txp:thumbnails?

#6 2006-03-10 20:40:57

Re: Rollovers for txp:thumbnails?

#7 2006-03-10 21:20:45

Re: Rollovers for txp:thumbnails?

#8 2006-03-10 22:09:37

Re: Rollovers for txp:thumbnails?

#9 2006-03-10 22:28:19

Re: Rollovers for txp:thumbnails?

#10 2006-03-11 00:33:52

Re: Rollovers for txp:thumbnails?

#11 2006-03-11 06:37:27

Re: Rollovers for txp:thumbnails?

#12 2006-03-11 16:07:27

Re: Rollovers for txp:thumbnails?

Board footer