Rollovers for txp:thumbnails?

hakjoon · 2006-03-15 20:51:35

whatbrick wrote:
IE does support both display and visibility on an img tag, but only at runtime, it seems. If you set img {visibility: hidden;} in a stylesheet, it will be hidden when you load the page, but trying it on a:hover img {visibility: hidden;} fails.

Now that’s just annoying. I only tested that code I suggested on the mac. I’ll have to give it a shot on windows. At least the javascript works.

Last edited by hakjoon (2006-03-15 20:52:46)

squaredeye · 2006-03-16 16:26:08

Well,
Whatabrick, you were right. Our old friend IE craps on this code. :(
Care to share you Javascript? I’m a dumb dumb when it comes to some of that stuff, so an explaining you can do will be helpful.

Thanks man,

Matthew

hakjoon · 2006-03-16 16:55:00

Do you need to overlay an image over the other? If you can just swap images you could always do

#column1 a {
   background: url(your_non_hover_image.jpg);
}

#column1 a:hover {
   background: url(your_hover_image.jpg);
}

the span is only needed if you have to overlay an image over the other image. This shouldn’t involve dealing with display or visibility. Probably not what you need though.

Last edited by hakjoon (2006-03-16 16:56:45)

squaredeye · 2006-03-16 20:03:43

Patrick,
I am placing img 1 (a txp thumb) via upm_img_popper.
which is placed on a background for a “frame” to the image.
When you roll over the thumb I want to show what section its in (design, web, sketch, or word) with an image that covers the one posted by txp.

So, in the end, I think the problem with the code above is that when the <code>img</code> is inside the <code><a></code> the <code>a:hover</code> property won’t apply? Seems that way anyhow.

So therefore it looks like one way or another I either need to use Javascript to create <code>img:hover</code> or Javascript to accomplish what Whatabrick is doing above?

What do you think?

whatbrick · 2006-03-16 23:13:51

Here’s the javascript I was using:

<code>

function ieImgShow(){ for(x=0; x<y.length; x++) { y[x].firstChild.className = “show”; }
}

window.onload = function setupStuff(){ d = document.getElementById(“articles”); y = d.getElementsByTagName(“A”);

for(x=0; x < y.length; x++) { y[x].onmouseover = ieImgHide; y[x].onmouseout = ieImgShow; }
}
—>
</script>
</code>

What it does is finds the element with id=“articles”, then goes through that element and finds all the A tags, then applies an onMouseOver and onMouseOut event to run either the ieImgHide or ieImShow functions respectively. The ieImgHide function sets the firstChild element of the A tag (in this case, the img tag) and sets its class=“hide”. The ieImgShow function does the same, except sets class=“show”. Both classes are defined in a stylesheet, and look like this:

<code>
.show {visibility: visible;}
.hide {visibility: hidden;}
</code>

It would help some if you took a look at the source of the example file I have <a href=“http://www.theguruguys.com/samples/imgover.html”>here</a> so you can see how it all fits together. Feel free to use whatever you need and let me know if I need to change anything to fit your needs.

squaredeye · 2006-03-17 04:37:15

Whatabrick,
Thx. I got it rollin.
Great explanation.

Matthew

Textpattern CMS

Textpattern CMS support forum

#25 2006-03-15 20:51:35

Re: Rollovers for txp:thumbnails?

#26 2006-03-16 16:26:08

Re: Rollovers for txp:thumbnails?

#27 2006-03-16 16:55:00

Re: Rollovers for txp:thumbnails?

#28 2006-03-16 20:03:43

Re: Rollovers for txp:thumbnails?

#29 2006-03-16 23:13:51

Re: Rollovers for txp:thumbnails?

#30 2006-03-17 04:37:15

Re: Rollovers for txp:thumbnails?

Board footer