I'm new to rollover scripts or css in general. I know how to read html and javascript or source code. Right now I'm stuck on something. I know I can take out <!-- that doesn't bother me. - About my website - (What it looks like so you have a better understanding) I currently have a tripod site for my Photography and now a section for Employment. So on my index page I have a small message and these 2 images separating the sites. I also have a password section on my index page for friends and family. No link on the navigational bar will be for both. If I have link saying home it will be for that section only. Since Tripod only allows so much hard drive space on a free account I want to upload these 4 images from Picasa, just to save disk space for my photography. How do I change this script to make it show up. If you want to see what I'm talking about please visit http://t.chamberlin.tripod.com. Website under heavy construction so all links are taken away from the images besides the banner. I also want the images re-sized to height: 320px; width:240px A Rollover question I am currently using tripod and want to know how to export images onto your website without uploading them to tripod. I have this script to upload images <center><A HREF="My website URL"><IMG SRC="Website image URL"></A></center> Here is the hard part. This is where I get confused. How do I combine the 2 scripts above and below and make it so the 2nd image is from other site as well. <style type="text/css" media="screen"> a#rollover { background-image:url(rollover1.gif); height: 50px; width:200px; display:block; } a#rollover span { display:none; } a#rollover:hover { background-image:url(rollover2.gif); } </style> The rollover1.gif and rollover2.gif has to change to a external site. Rest I can figure out. Please help I need this script to finish my site. Thanks Tyler
Hi, I am a little confused by your query. First of all, I think the terms import and export are the wrong terms to use here. Same as 'uploading'.. that script will only show images, not upload. From what I can tell, you're wanting another link.. which is from a separate URL You could simply create another class in the stylesheet.. like so... <style type="text/css" media="screen"> a#rollover_2 { background-image:url(http://externalsite.com/rollover1.gif); height: 50px; width:200px; display:block; } a#rollover_2 span { display:none; } a#rollover_2:hover { background-image:url(http://externalsite.com/rollover2.gif); } </style> Code (markup): And then aptly name your links <a href="#" id="rollover_2">#</a> Code (markup): alternatively, you could simply have this... <style type="text/css" media="screen"> a#rollover { height: 50px; width:200px; display:block; } a#rollover span { display:none; } a#rollover:hover { background-postition; 0px 20px;} </style> Code (markup): Having an image load when you hover over something is bad practise, as there is a slight delay whilst it loads the image. Best way is to put the 2 images into 1 single image (one on top of the other), and shift the background position on hover. So, given the script above.. you simply have a link with the id of rollover, but assign your own background <a href="#" id="rollover" style="background: url('http://externalsite.com/rollover.gif');">External Image</a> <a href="#" id="rollover" style="background: url('/rollover.gif');">Internal Image</a> Code (markup):
Your question is confusing, may be re-framing a bit would help us to understand. BTW, HTML /CSS are not script.
Sorry for having it so confusing. I didn't know how to word it. I just wanted a rollover effect. I'll try that stylesheet. How do you have 2 images side by side in a table? How does the code change. Here is what I got for right now. The images are currently on my website directory. So I'll try your way to see if it can work on external image links. Before I got your posts. It works if I only have 1 rollover effect but when I add 2 the effect stops working. There has to be something wrong with the coding but I don't see where it is. I'll add a <a herf> later to link up my site.
I have done this and the images arnt showing up. Even when I try the ways what am I doing wrong now. This rollover effect is pissing me off. All I want is that the red boarder turn to blue if you hover / mouseover the image. My code I used but failed
Here are the links I want to be used in this order. Image 1: lh4.googleusercontent.com/_3ATfdCkzNUA/TdTABZoq6eI/AAAAAAAABQI/OPD2Wv90PDE/employment%20blue%20banner.jpg Image 1 (hover):lh3.googleusercontent.com/_3ATfdCkzNUA/TdVGII_tXnI/AAAAAAAABQY/6n1gX- 51B3A/employment%20red%20banner.jpg Image 2:lh3.googleusercontent.com/_3ATfdCkzNUA/TdqSKWcnQoI/AAAAAAAABSI/gkYYp4Kt1uM/photography%20blue%20banner.jpg Image 2 (hover):lh3.googleusercontent.com/_3ATfdCkzNUA/TdqSKkk29cI/AAAAAAAABSM/ffRkAsmdxqw/photography%20red%20banner.jpg