Holy moly... I'm full of questions these days.
I'm trying to make image rollovers for the 'buttons' at the top of my blog, and I'm having troubles.
I've got the appropriate images all created and uploaded.
I tried using Dreamweaver to create the coding for me... it created a Javascript code.
I tried it out, and it worked when previewing the code... but once I save the code, the Javascript ... the actual < script > part ... gets removed from my coding... so the rollovers no longer work. The rollover coding that goes with the image tags remains (and can be seen in the page source), but the scripting mumbo jumbo gets removed.
Any ideas of how to do it without Javascript? (I'm assuming this blogging system is setup to disallow the type of coding I was trying to do).
Image Rollover?
Comments:
Posted by Lisa
at 10:21, 9/20/2007 | Link | |
I don't have a clue what you're talking about Shawn...lol I'm going to work on my page this weekend and try to get it all set up. Good to see you:)
Posted by mothman
at 11:15, 9/20/2007 | Link | |
lol
The funny thing is, I'm not sure *I* know what I'm talking about either. :p
I've just been spending the last couple days scrounging the net looking for hints on how to do this stuff... then trying things out, breaking everything, and trying again.
It's important for me to keep backup copies of the coding text, lets' put it that way. :p
I've just been kind of trying things, and previewing the change... to see what does what.
It's slow... but I'm getting things figured out a little bit here and there.
The funny thing is, I'm not sure *I* know what I'm talking about either. :p
I've just been spending the last couple days scrounging the net looking for hints on how to do this stuff... then trying things out, breaking everything, and trying again.
It's important for me to keep backup copies of the coding text, lets' put it that way. :p
I've just been kind of trying things, and previewing the change... to see what does what.
It's slow... but I'm getting things figured out a little bit here and there.
Posted by WelshPixie
at 06:22, 9/21/2007 | Link | |
CSS to the rescue!
Create your link with the image (in this example, let's say the image is 200px wide and 50px high, which comprises of your first 100px wide image on the left and 100px rollover image on the right, forming one 200px long image:
< a href="#" >< img src="blah.jpg" >< /a >
And add the following CSS to the template code:
a { display:block; height:50px; width:100px; overflow:hidden; }
a:hover { display:block; text-indent:-100px; }
It works by setting the first tag with the height of the image and a width of half the image, so you only see the one half (the pre-rollover image); then, the a: hover bit has a text indent of -100px, half the width of the full image, which shifts the image to the left and only shows the right-hand-side rollover image.
This works with all common browsers. :) (If ya need help, give me a shout; if you don't have my e-mail addy still, it's delyth.angharad@gmail.com) ^.^
Create your link with the image (in this example, let's say the image is 200px wide and 50px high, which comprises of your first 100px wide image on the left and 100px rollover image on the right, forming one 200px long image:
< a href="#" >< img src="blah.jpg" >< /a >
And add the following CSS to the template code:
a { display:block; height:50px; width:100px; overflow:hidden; }
a:hover { display:block; text-indent:-100px; }
It works by setting the first tag with the height of the image and a width of half the image, so you only see the one half (the pre-rollover image); then, the a: hover bit has a text indent of -100px, half the width of the full image, which shifts the image to the left and only shows the right-hand-side rollover image.
This works with all common browsers. :) (If ya need help, give me a shout; if you don't have my e-mail addy still, it's delyth.angharad@gmail.com) ^.^
Posted by DeeJay
at 08:43, 9/21/2007 | Link | |
I figure if I can manage to do a couple of things here, then anyone can. LOL
You'll have this all spiffy in no time!
You'll have this all spiffy in no time!
Add Comment
I'd be helping you out, but you way way way don't want any comp help from me. LOL I suck at it.