Rollovers for txp:thumbnails?

squaredeye · 2006-03-11 17:49:50

Soulship, Alex,
The only problem I see with this is that I’m not sure how I would give the plugin dynamic content?

Again, I want the hover to BE the latest article image. (or more likely, just appear that its the hover). Did I miss something or can you do that with this plugin?

Matthew

hakjoon · 2006-03-12 00:17:29

How does img a:hover ever work with anything? It seems like you could never have a link inside an image.

How about something like

for the HTML

<a href="somewhere"><span></span></a>

and for the css

a {
	background: url("Image-1") no-repeat;
	position:relative;
	width:320px;
	height:240px;
        display:block;
}

a span {
	position:absolute;
	width:100%;
	height:100%;
	background: url("Hover-image") no-repeat;
	display:none;
}

a:hover span {
	display:block;
}

Change the width and height of the anchor to match your image size. You could set the images using inline styles in order to have <txp:tags> available.

<a href="somewhere" style="background:url(<txp:article_image/>)">
  <span  style="background:url(hover_image)"></span>
</a>

This should work in IE/win without any tricks since it uses anchors for the :hover. If you want to use other elements you will have to fake the :hover. The javascript I previously sent you will do it.

Last edited by hakjoon (2006-03-12 00:20:20)

squaredeye · 2006-03-13 00:15:36

Patrick,
I hadn’t thought of using inline styles, that makes sense.
Good one. I’ll be working on this, and I’ll show you the final product when I’m finished.

Cheers,

Matthew

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)

Textpattern CMS

Textpattern CMS support forum

#13 2006-03-11 17:49:50

Re: Rollovers for txp:thumbnails?

#14 2006-03-12 00:17:29

Re: Rollovers for txp:thumbnails?

#15 2006-03-13 00:15:36

Re: Rollovers for txp:thumbnails?

#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?

Board footer