Hi, I am sick of my cheap looking website, but since I don't have money to pay someone, I am going to use html code to build it myself. So far, I've got my home page set up the way I like it, complete with a few anchor tags/links that (when hovered over) turn bold, increase font size, and change color. Really cool looking! They are bundled together and I have four "classes", each "class" changes it's own color or font when moused over.
I want people to be able to hover over my links, without loseing their properties, and for each link hovered, I would like to have an image display (and then not display when the mouse is not hovering), and I would need to adjust the image dimentions and place it in a specific area as well.
I found a code that (kind of) works, but it removes my link properties, so I won't be using it. I'm starting to get a head ache.
Does anyone know a way to mouse over links (and I have a few to hover over) and show images (specific image for each link)and still keep my links.
Any advice (or a post I didn't find) will be greatly appreciated.
Thank you so much!
I looked at the examples submitted, and went with this one - I tinkered with it and came up with something I can use -----YAYYY, it does what I want it to do!!!.
NOW (since I'm not real good at this), would you be so kind to clean it up if it needs to be? ....and Thanks!
Hi Mikethepainter,
Looks like you're getting there! Just a few comments. First, you seem to have some extraneous code, such as the duplicated image (same ID and everything -- just delete one of them) plus a block of styles with the #Style selector, which aren't applied to anything.
Also, the first time you rollover the links there is a big delay as the images load. To prevent this, you can preload them in a script somewhere in the <head>. For each image, just create an <img> element and set its 'src' property, as follows
Code:
document.createElement ("img").src = [here put the URL of the image];
You don't need to save the element node that's returned by createElement(). Simply creating it preloads the image and that's all you want.
Hi Mikethepainter,
Looks like you're getting there! Just a few comments. First, you seem to have some extraneous code, such as the duplicated image (same ID and everything -- just delete one of them) plus a block of styles with the #Style selector, which aren't applied to anything.
Also, the first time you rollover the links there is a big delay as the images load. To prevent this, you can preload them in a script somewhere in the <head>. For each image, just create an <img> element and set its 'src' property, as follows
Code:
document.createElement ("img").src = [here put the URL of the image];
You don't need to save the element node that's returned by createElement(). Simply creating it preloads the image and that's all you want.
Yes, I found the duplicates while building onto it, and deleted some other coding that didn't appear to be doing anything anyways. (Keep in mind, I have no idea what I'm doing), but I am thrilled that the coding I have is still working. I am using a real time html edit web page and watching what happens to my work as it is done. It's fun, but it's not as easy as it looks. - Thanks for the response!
Don't forget to preload the images. Once you've shown the images in your own browser, they'll be cached and will display fast, so it's easy to forget that the first time other users hover over a link there might be a long delay before the image appears.
<script>
<!-- - -------<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< I don't know what this "Var img" procedure is, but when deleted, nothing works -->
var img;
window.onload = function ()
{
img = document.getElementById ("img");
}
</script>
<h2></h2>
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<This next line is important. I need all images to show up at these coordinates, and in this size,
HOWEVER, I don't need the the Grand Canyon stuff, and I can actually see it load when I hover - then it's gone....do I need the "alt = " " for future use? -->
<img style= "position:absolute;TOP:85px; LEFT:785px;visibility:hidden;" id="img" src="http://www.grand.canyon.national-park.com/images/grac.jpg" width="500" height="350" alt="my dog"/>
<img style="visibility:hidden;" id="img"
</A>
</style>
<style type="text/css"> <!--- -----<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<This formats my links that I hover over -->
A.one:link { COLOR: #0B0B61; TEXT-DECORATION: none; font-size: }
A.one:visited { COLOR: #0B0B61; TEXT-DECORATION: none; font-weight: normal }
A.one:active { COLOR: black; TEXT-DECORATION: none }
A.one:hover { color: white; text-decoration: underline; background: #990000 ;font-size:13pt }</style></font>
<!--- -----------------------------------------------<<<<<<<<<<<<<<<<<<<<<This next part is the stuff that's supposed to load when I hover, I filled in "Target1, Target2, ...but not sure why. I think I might need it, but not sure how it works.
-->
<a href="target1" class="one"onmouseover="img.style.visibility='visible'; img.src=' http://0.tqn.com/d/goafrica/1/0/Y/Q/IMG_1592.JPG'" onmouseout="img.style.visibility='hidden';">Elephant,</a>
<a href="target2"class="one" onmouseover="img.style.visibility='visible'; img.src=' http://static.ddmcdn.com/gif/willow/hummingbird-info0.gif'" onmouseout="img.style.visibility='hidden';">humming bird,</a>
The "var img; ... window.onload..." code is where the global variable 'img' gets declared and initialized. You can see 'img' used later in the 'onmouseover' and 'onmouseout' code.
I got in the habit of including alt="" so that the page will validate at W3C. It's not necessary. 'alt' is intended to provide alternative text if the browser can't display the image (for example, it can't find it).
Target1 and Target2 should be filled in with the URLs of the link targets.
Thanks for your input, where exactly would the preload image code go?
Just put it in a <script> element in the HEAD. BTW, an alternative way to preload an image that you'll see a lot is to use the Image() constructor, so the following two lines of JavaScript are equivalent:
Code:
<head>
<script>
// use this:
document.createElement("img").src = "image_URL";
// OR this:
(new Image()).src = "image_URL";
</script>
</head>
Reply With Quote
Originally Posted by mjy
Bookmarks