Help - Search - Members - Calendar
Full Version: Mouse Over Images
Movable Type Community Forum > Additional Resources > Tips and Tricks
kadyellebee
You might be able to use Alpha Filters in your CSS to produce the effect you want w/o needing an extra copy of your images.  Check out this tutorial and you can see an example of it on the sidebar of one of their other sites.

Otherwise, if you work on getting the script with the MT tags in it to work, you probably want to make sure that you have a lastn in the MTEntries tags that matches that of the actual MTEntries where your posts display.  This way, you aren't preloading extra images. smile.gif

Kristine
bmk
OOH that's awesome!   smile.gif  Great job!
bmk
Are you talking a link to the full size pic from the thumbnail?    :)  This is what I"m doing here (page is big).  You just use this around the img src:
CODE
<a href="<$MTEntryLink$>">...</a>


Here's the whole thing:
CODE
<a href="<$MTEntryLink$>"><img class="thumbborder" alt="<$MTEntryCategory$>: <$MTEntryTitle$>" src="<$MTBlogURL$>img/<$MTEntryExcerpt$>-thumb.jpg" width="80" height="60" border="0" on_Mouse_Over="this.filters.alpha.opacity='100'" on_Mouse_Out="this.filters.alpha.opacity='50'" style="filter:alpha(opacity=50);-moz-opacity:50%;" /></a>

(remove the underscores from on_Mouse_Over and on_Mouse_Out as noted above.  Or um, am I way off here?

huh.gif Brenna
cje
I'm glad so many people liked it.

BTW, if you want your images darker or lighter, just adjust the 50% opacity number. O% is invisible (pretty neat) and 100% is fully visible. The background color of that CSS element will effect the ultimate "tint" of your image. So mine looks like it does because I have a grey background color.

As you can tell from that CSS tutorial page, there was no explicit instructions for any of these cool things. I had to look in the webpage source. So if anyone can find better instructions than that page, please link it. I'd like to use some of the radial or rectangle transparency options, but don't understand the begin and end (X, Y) factors well enough (though I'm already addicted to the horizontal transparency for header bars - great way to get an image to blend into the header background).
cje
This Photoblog has two sets of thumbnails. The regular full color ones that are visible now and a grey washed set. I had intended to use an OnMouseOver type script to have the grey thumbnails show by default and the full color ones be visible when the cursor is moved over it. (Duh, I know.)

But all the scripts I've found require both sets of images to be pre-loaded, written in the head of the document and not just in the href tags. That's fine for a static page, but how can I do it w/ a photoblog where the images change constantly?

I'm using
CODE
<img src="<$MTEntryTitle$>-thumb.jpg">
for the thumbnails right now. The greyed out images are the EntryTitle as well w/ -greythumb instead.

Any suggestions on how to get the MouseOver to work with MT tags. Or a different way of getting the same look (I saw some mentions of Microsoft filters w/ opacity values somewhere, but didn't understand it & can't find it now.)
xxAxel1xx
By the way, you might want to change
CODE
<$MTEntryTitle$>

wherever it occurs to this:
CODE
<$MTEntryTitle dirify="1"$>

Just in case you have multiple word titles....
bmk
The board eats the on_Mouse_Over and on_Mouse_Out!  Bah, I was wondering why mine wasn't working, duh!

Okay, so I'm going to write it like that, with the underscores in the on_Mouse_Over and Out, but you should take those out:

CODE
on_Mouse_Over="this.filters.alpha.opacity='100'" on_Mouse_Out="this.filters.alpha.opacity='50'" style="filter:alpha(opacity=50);-moz-opacity:50%;"


This is really cool, thanks!  :)

Brenna
mcramer
cje - Very nice smile.gif  How about a link to the individual entry from the image? (you may already be going to do this)
bmk
I was playing with this last night, the transparency works fine with Netscape 6 but the mouseover doesn't.   You probably want to change the moz-opacity:50%; part to moz-opacity:100%; so the images show at 100% in Netscape, otherwise they will show at 50%.
nriethmann
I haven't tested the actual functionality of this, but have you tried using MT tags in the script that preloads the images?  Something like this might work:

CODE
<script language="javascript">
<MTEntries>
var <$MTEntryTitle$>_thumb = new Image(123,456);
   <$MTEntrytitle$>_thumb.src = "<$MTEntryTitle$>-thumb.jpg";
var <$MTEntryTitle$>_graythumb = new Image(123,456);
   <$MTEntrytitle$>_graythumb.src = "<$MTEntryTitle$>-graythumb.jpg";
</MTEntries>
</script>


So, for example, if you have three images (image1.jpg, image2.jpg, and image3.jpg), the variables created (and therefore, the images that will be preloaded) are as follows:

image1_thumb = image1-thumb.jpg
image1_graythumb = image1-graythumb.jpg
image2_thumb = image2-thumb.jpg
image2_graythumb = image2-graythumb.jpg
image3_thumb = image3-thumb.jpg
image3_graythumb = image3-graythumb.jpg

These variables can then be used in the img tags nested inside your anchor tags, as well as easily passed as arguments to whatever rollover script you're using.

Hmm, I may be onto something here.  Let me do some further exploration/testing and I'll let you know what I come up with.

IMPORTANT: This also assumes that all of your color and grayscale thumbnails are of the same dimensions (height and width).  I haven't played around with getting that information dynamically, but I'm sure there's a work-around.  Again, let me play with this a bit.
cje
Thanks Kristine, I was hoping there was something like that, but my O'Reilly book didn't have anything on opacity in it. So much for being the "definitive guide." wink.gif

And thanks for the note Kyle, I put the image filename in the MTEntryTitle field, so no fears of multiple words, or atleast, the few times there have been, it has correctly inserted the space break in the filename and called my image correctly.

::UPDATE::

The page Kristine linked doesn't explicitly say how to make the mouseover, so I thought I'd share the code I'm using just for anyone else that's interested. It's working exactly like I wanted it now.

CODE
<span class="thumbnail"><img src="thumbs/<$MTEntryTitle$>-thumb.jpg" width="400" height="100" ALT="<$MTEntryBody$>" "this.filters.alpha.opacity='100'" "this.filters.alpha.opacity='50'" style="filter:alpha(opacity=50);-moz-opacity:50%;"></span>


The Photoblog Page in Question
My Blog
bmk
Darn mouse_over eater!  :)   I pasted the code in mine that cje posted (thanks for figuring it out!) and I was all SAD FACE because it didn't work.  So I went and peeked at cje's source code and A-HA!  Thanks a bunch, I think this is way neato.  I got it working on a test page and I just need to apply it to my photolog, weeeeeeeeeee!

Brenna
taing
To answer my own question: It appears to be an IE thing for now but opacity is a CSS3 property.

taine
yellowX
I just wanted to say that I love this little CSS/JavaScript trick smile.gif I just implemented it today on my homepage for some little teaser images for my galleries and it works like a charm... Awesome stuff!
cje
Thanks Kristine. I've just bookmarked all those babies for myself. smile.gif
cje
Yes, all the thumbnails are the same dimension.

The photoblog I want to do this for is brand new, so I can test anything out there w/o hesitation if you have something for me to try.

With the code sample that you included, how does the image name (not the file name, but the reference name that's needed for the href script bits) get generated and how would I write that?

Photoblog I'm working on
Me
kadyellebee
That looks great!  I'm so glad you got it to work how you wanted to - and w/o having to do multiple copies of your images!  Neato! smile.gif

Kristine
kadyellebee
Thank you Brenna - I knew something looked funny about the code when it was posted!! smile.gif
taing
I really like the opacity thing. Is it an IE only trick or does Mozilla support it also?

taine
kadyellebee
I went back to my old bookmarks (I've just gotten a new computer and haven't intergrated my favorites yet!!), and found a few more links that talk about the css filter command.

These all have to do with an overview on all of the filters available, not just transparency.
coffeefilters
webmonkey tutorial
webclass: changing opacity - more explicit instructions for what you already did.
w3schools image filters
web developers cafe - good overall info

Anyhow, now you  have my real bookmark list on this topic smile.gif

Kristine
vashinue
What would I have to adjust in the code -
CODE
<a href="<$MTEntryLink$>"><img class="thumbborder" alt="<$MTEntryCategory$>: <$MTEntryTitle$>" src="<$MTBlogURL$>img/<$MTEntryExcerpt$>-thumb.jpg" width="80" height="60" border="0" on_Mouse_Over="this.filters.alpha.opacity='100'" on_Mouse_Out="this.filters.alpha.opacity='50'" style="filter:alpha(opacity=50);-moz-opacity:50%;" /></a>


to do a mouse over from thumbnail to popup bigger version of picture ?

Thanks in advance
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.