If you are an impatient individual, you will more than likely not want to use this tutorial!
I was online, as usual, when Amanda (blaqheartedstar) was frustrated.
She was confident about an hour earlier about making her latest design,
of which she was going to use rollovers on her image map. She later
replied giving up because Myspace had rejected the rollover codes due
to the fact that they were Javascript. As everyone knows, Myspace
doesn't allow Javascript, so I made a solution to her problem. This
tutorial will teach you how to make an image map rollover without
Javascript (intended for Myspace users because of the Javascript
problem.) First: You need to make your overlay image with the text that you want to be hovered. . Second: You need to make rollover image. Third: Host all of your images either in Photobucket or ImageShack. Fourth:Open your overlay image in Miscrosoft Paint. Use the
Select Tool to make a rectangle around the text on the image that you
want to be hovered. .
The first two numbers are your positioning numbers, the second two
numbers are your size numbers (The numbers in the image are just an
example). You will need both of them when you code your rollovers. Fifth:You now need to add CSS to make your overlay image appear.
Get the overlay image url that you hosted earlier and replace the
URLHERE in the header style codes. You will also need to adjust the
NUMBER property to fit the image's size. Leave all other CSS as is to
prevent the code from not fuctioning properly.
<style type="text/css">
.header{
background:url(URLHERE) top left no-repeat;
display:block;width:NUMBERpx;height:NUMBERpx;
position:absolute;left:0px;top:0px;
z-index:0;
}
</style>
Sixth:After you have your overlay image up, you now need to
create the rollover images. You will need however many rollover images
to correspond with your links. Look back at the working preview to
understand. Each rollover class will have it's own positioning and
background image. Get the rollover image url that you hosted earlier
and replace the URLHERE in the rollover style codes. You will also need
to adjust the NUMBER property to fit the image's size. Leave all other
CSS as is to prevent the code from not fuctioning properly. You also do
not need to copy and paste the script that ImageReady gives for image
mapping if you are using this tutorial. You will however have to make
multiple CSS names for each rollover you create. This involves a lot
image hosting and positioning (Just as a warning). If you are an
impatient individual, you will more than likely not want to use this
tutorial. Read further if you are using this tutorial.
<style type="text/css">
a.NAMEHERE{
position:absolute;top:NUMBERpx;left:NUMBERpx;
display:block;overflow:hidden;
width:NUMBERpx;height:NUMBERpx;
background-color:transparent;
z-index:4;
visibility:visible;display:inline;
}
a.NAMEHERE:hover{
background:url(URLHERE) top left no-repeat;
z-index:4;
visibility:visible;display:inline;
}
</style>
Seventh:After the CSS is installed, you now need to imput the
actual HTML tags. (You can either place this in your I'd Like To Meet
or About Me section in your editing page.)
^You will need to add and change the CSS rollover HTML tags by how many you create.
The tutorial is over. Click to see the working preview once again.
^It is mainly just a link with a background image that is placed over the overlay image when you hover over a desired place.
