Rollovers for txp:thumbnails?

squaredeye · 2006-03-13 05:26:23

Patrick,
Doesn’t the <code><txp:article_image /></code> tag spit out an <code><img src=“http://whatever.com” /></code> bit of code? I would need a url only type of code right?

Matthew

hakjoon · 2006-03-13 13:25:14

oh damn you are right.

You could use upm_article_image with a custom form that only has upm_img_full_url. Perhaps a url-only option is called for in the new image tags

squaredeye · 2006-03-13 13:59:11

Hak,
Yeah, I think that’s a great idea. url only, so you can use it more flexibly.
I may end up using Mary’s tags for that one, I started thinking about that last night.

Thanks man,

Matthew

squaredeye · 2006-03-15 04:54:36

Alright folks, I figured this one out. Or rather, we figured this one out :) Thanks for everyone’s help.

Here’s how I have it working:

In my page:
<code>
<txp:article_custom form=“thumb” section=“web” category=“web” limit=“1” />
</code>

in the form = “Thumb”
<code>
<div id=“column1”>
<a href=”<txp:permlink />” style=“background:url(<txp:upm_article_image form=“full_url” />)”>
<span class=“web”></span>
</a>
</div>
</code>

In the form =“full_url”

<code>
<txp:upm_img_thumb_url />
</code>
Which requires the plugin upm_img_popper (and specifically the upm_article_image tags within that plugin

The CSS is extensive, and someone like Stuart will likely show me a place its overblown and redundant, but hey, my job is to be the guy who makes Stuart look good.

CSS
<code>
#column1 { height: 192px; width: 208px; padding: 13px 0 0 0; float: left; background: url(http://localhost:8888/artiswork.org/thinking.jpg) #FFF no-repeat top left; }
#column1 a { position:relative; margin: 0 0 21px 36px; width: 158px; height: 68px; display:block;
}

#column1 a:hover span.web { margin: 0; width: 158px; height: 68px; display:block;
}

#column1 a span.web { position:absolute; width:100%; height:100%; display:none;
}

#column1 span.web { background: url(http://localhost:8888/artiswork.org/web.jpg) #FFF no-repeat top left; position:relative; margin: 0 0 21px 36px; width:158px; height:68px; display:block;
}

#column1 div.web { background: url(http://localhost:8888/artiswork.orgweb.jpg) #FFF no-repeat top left; position:relative; margin: 0 0 21px 36px; width:158px; height:68px; display:block;
}

</code>

Last edited by ma_smith (2006-03-15 04:55:33)

whatbrick · 2006-03-15 10:10:42

I took a crack at this because using inline style declarations just doesn’t sit well with me. In messing with it, I learned something (else) frustrating with IE…I know, big surprise.

My first attempt was using just XHTML and CSS. The markup was simple:

The CSS was just as simple and I used a:hover img {visibility: hidden;} to hide the image. Worked in FF, Opera and Konquerer (all I have available right now)…but failed in IE.

I then whipped up some simple javascript to handle IE. It’s not pretty, but it did the job. Basically all I’m doing is swapping a couple of CSS styles that I have defined by class names on the mouseover and mouseout events. They are being applied to the img tag.

Here’s the styles:

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

So in essence, it’s doing nearly the exact same thing as a:hover img {visibility: hidden;} is, but it’s using javascript to swap them out instead of regular CSS declarations. That is the frustrating part to me. Why is the javascript working and not the CSS, when they are basically relying on the same thing? Am I overlooking something obvious (would not be the first time)?

Oh well, the problem was solved, so at least someone can be happy. But hey! I was able to separate my structure, presentation and behavior!

I need a new hobby.

If you wanna take a peek at the final result, you can view it <a href=“http://www.theguruguys.com/samples/imgover.html”>here.</a>

hakjoon · 2006-03-15 13:37:16

Matthew you should be able to get away with just this.

CSS


#column1 {
	height: 192px;
	width: 208px;
	padding: 13px 0 0 0;
	float: left;
	background: url(http://localhost:8888/artiswork.org/thinking.jpg) #FFF no-repeat top left;
	}
#column1 a {
	position:relative;
	margin: 0 0 21px 36px;
	width: 158px;
	height: 68px;
    display:block;
}

#column1 a span.web {
	position:absolute;
         margin: 0;
	width:100%;
	height:100%;
	display:none;
}

#column1 a:hover span.web {
	display:block;
}

Not sure what these are for. They seem redundant.

bc..
#column1 span.web { background: url(http://localhost:8888/artiswork.org/web.jpg) #FFF no-repeat top left; position:relative; margin: 0 0 21px 36px; width:158px; height:68px; display:block;
}

#column1 div.web { background: url(http://localhost:8888/artiswork.orgweb.jpg) #FFF no-repeat top left; position:relative; margin: 0 0 21px 36px; width:158px; height:68px; display:block;
}

hakjoon · 2006-03-15 13:43:13

whatbrick wrote:
I took a crack at this because using inline style declarations just doesn’t sit well with me. In messing with it, I learned something (else) frustrating with IE…I know, big surprise.

The inline style is only necessary if you want to have the background image be set using TXP tags. I don’t know of anyway to apply them directly in the stylesheet. I’d love to be proven wrong here.

So in essence, it’s doing nearly the exact same thing as a:hover img {visibility: hidden;} is, but it’s using javascript to swap them out instead of regular CSS declarations.

That’s pretty odd. Specially since IE is supposed to have supported that since 4.0. Would display:none work? I always tend to gravitate to that instead of visibility for some reason. Anyone know of any reason why one would be preferable over the other?

squaredeye · 2006-03-15 13:44:59

Patrick,
I’ll place the site live soon (but in a secret location (cue the bond music))
And you can take a look at it if you care to. For now, for whatever reason,
I DO need those pieces.

The div specifically handles the image when I am on that section, so that the “hover” image appears as the background, so that it acts as a menu “active”. If I remove the #column1 div.web I lose rollover functionality for that element. Give me a couple of days and I’ll take it to the www.

Thanks for the thoughts though.

Matthew

whatbrick · 2006-03-15 19:47:37

hakjoon wrote:

That’s pretty odd. Specially since IE is supposed to have supported that since 4.0. Would display:none work? I always tend to gravitate to that instead of visibility for some reason. Anyone know of any reason why one would be preferable over the other?

I tried display: none; as well and it still didn’t work in IE, unless I used the same javascript. Here’s another kick in the pants…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.

I chose visibility instead of display because, and I’m making an unsupported assumption here, display takes the element out of the document flow….visibility, I think, does not. I say this because when I first use the display property, the a element would shift sizes. Not so with visibility. I haven’t read up on either property, so I could be wrong in my reasoning. I just know what worked.

I normally use display as well, but only because I completely forgot about the visibility property…heh, oops.

Last edited by whatbrick (2006-03-15 19:48:20)

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

#16 2006-03-13 05:26:23

Re: Rollovers for txp:thumbnails?

#17 2006-03-13 13:25:14

Re: Rollovers for txp:thumbnails?

#18 2006-03-13 13:59:11

Re: Rollovers for txp:thumbnails?

#19 2006-03-15 04:54:36

Re: Rollovers for txp:thumbnails?

#20 2006-03-15 10:10:42

Re: Rollovers for txp:thumbnails?

#21 2006-03-15 13:37:16

Re: Rollovers for txp:thumbnails?

#22 2006-03-15 13:43:13

Re: Rollovers for txp:thumbnails?

#23 2006-03-15 13:44:59

Re: Rollovers for txp:thumbnails?

#24 2006-03-15 19:47:37

Re: Rollovers for txp:thumbnails?

#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