Christmas Cat Experiment
My cat Ringo, no longer a kitten, after climbing into the Christmas tree one year. Bad cat!
This post is an experiment. Move your mouse over the cat and he should morph from cartoon cat to photo cat.
Blog Tag: Amusements Blog Tag: Images Blog Tag: Ringo
Posted 8/15/2004 12:56:00 PM
L
On 8/15/2004 2:38 PM, 
Terri said...
On 8/15/2004 5:19 PM, Lisa said...
On 8/15/2004 8:21 PM, magz said...
On 8/16/2004 2:54 AM, Claude said...
On 8/16/2004 3:45 PM, gemmak said...
On 8/16/2004 4:32 PM, dkgoodman said...
On 8/16/2004 7:42 PM, Lisa said...
On 8/17/2004 7:06 AM, Dale said...
On 8/17/2004 7:49 AM, magz said...
On 8/17/2004 8:01 AM, gemmak said...
On 8/18/2004 11:52 PM, dkgoodman said...
11 Comments:
YES! I am morphing! Kewl!
you are having too much fun with cartoons! :-)
WOW! I bow, scrape, and genuflect in your general direction!!! AWESOME!!! Dare I ask...how? (and how much'll it take to gettcha ta teach it?) WILL TRADE CHICKENS FER INFO!
Great stuff! It's fun, too.
Yayyyy...it works...I want, I want!
This one's a little tricky. Here's the first part:
<script language="javascript" type="text/javascript">
<!--
function sel(place, image) {
document.images[place].src = document.images[image].src }
// -->
</script>
This is a function that replaces one image with another one. I couldn't put it in the blog post because it filters out script tags. This goes in your template, near the top. Be sure to back up your template before you muck with it. If you can find a section up there already using <script> then just put the function sel line after the existing <script> tag. Otherwise, put all three lines right after your <title><$BlogPageTitle$></title> line. That's the first part.
Next, you need two images, one cartooned and one original (or any two images, if you wanna do something different). You put the following statement inside your blog post:
<IMG onmouseover="sel('ringo', 'RO'); return true"
onmouseout="sel('ringo', 'RC'); return true"
src="http://blog/image.jpg" name=ringo>Whereever it says 'ringo' replace it with a name for this image, and fix the src= to point to your image on your server. This line says to display an image, and when the mouse goes over it, replace this image named ringo with the image named RC (which we haven't discussed yet) and when the mouse goes out to replace it with the image named RO (pick your own names, RC means RingoCartoon and RO means RingoOver). I told you this was gonna be tricky!
Finally, we need to specify the two images to replace the original one with. I do it like this:
<IMG height=1 src="http://blog.com/cartoon.jpg" width=1 name=RC>
<IMG height=1 src="http://blog.com/original.jpg" width=1
name=RO>
See how we've named each of these three images? One is like a placeholder, and the other two you don't want to see, but they will be copied to the placeholder as the mouse goes in and out. Look at the source for this web page and you'll see how it looks in use.
Now take some aspirin and call someone in the morning.
I am starting to feel dizzy!
I think I fixed the popup issue on my site, btw.
Totally cool, Dave! But you're not speaking my lingo with that aitchty emell stuff. Whatever it is you're doing, just keep doing it!
whew... okay, i asked. Maybe.... just a teench over my head at the moment, but hey! im on my first cuppa mud! its been printed fer home study... bow im off to look at yer banner makin place, i covet...
Ooooooooo I just gotta have go!....watch my blog crash and take windows with it! Lol.
Okay, if it helps any, I've simplified the transformation. No need to add anything to your template.
<img src="http://yourblog.com/foo.jpg" name="ringo" onmouseover="ringo.src=RO.src; return true" onmouseout="ringo.src=RC.src; return true">The code above goes in your post. It displays an image named Ringo, and as you mouse in and out it replaces the image with other images (RO and RC here) from the post, images that you've given a size of 1x1 so they barely show.
Post a Comment
Links to this post:
Create a Link
<< Home