Fake Image Map Rollovers

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.

.header{
background:url(URLHERE) top left no-repeat;
display:block;width:NUMBERpx;height:NUMBERpx;
position:absolute;left:0px;top:0px;
z-index:0;
}

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.
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;
}

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.
^It is mainly just a link with a background image that is placed over the overlay image when you hover over a desired place.

It's creating a transparent div block and position/linking it over a desire area.

lol maybe I will just use someone else's code and remove their images and insert my own. lol. Cus I am lost here. Oh well. Thnx for your help, yo.

I will get this after reading it twice or so. I also need to find out about image ready. Not sure if even my dad has it, I just never noticed...I think.....?......

I get very convoluted when I try to explain something simple to me, yet difficult for others to understand. It doesn't make it any easier trying to post something simple yet extremely tedious and over-exaggerated on the internet. I do see a lot of errors but if I didn't try to explain anything at all, think of the many more people who would have still been lost had I not?

Its just a script to create transparent div links and/or if you would like an image to be in the background when you hover over it.

I had images included but they were removed or the bandwidth exceeded, sorry.

I like it but the tutorial isn't that well-written.

RE: Its creating transparent links with a background image when they are hovered...

If you have an overlay image and want a hover effect on a certain part or area and you've created another image that will change the appearance of the spot when its hovered, then this code is just an easy way of combining the two - image and hover spots.

Similarly, this script will do the same however does not provide the image placement codes and in-depth explanantion.

http://www.cr eateblog.com/scripts/script.ph p?id=1799

yeahh still confused andi read this over and over

I found this code useful and not too laborious for a simple faded rollover.
Put this in the style.css sheet

a.myopacity img{
border: none;
padding: 0px;
filter:alpha(opacity=45) ;
-moz-opacity: 0.45;
opacity: 0.45;
}

a.myopacity:hover img{
border: none;
padding: 0px;
filter:alpha(opacity=100 );
-moz-opacity: 1.0;
opacity: 1.0;
}

Then on your page insert your images to be faded on rollover and put the myopacity class in their link:


Regards,
Mayda
Un limited Media - small business web design
http://unlimitedmedia. com

Its creating transparent links with a background image when they are hovered...

im usually smart... but you have confused me badly..

View all »

Author	anime-essence
Submitted on	Jan 6, 2007
Page views	76,622
Favorites	46
Comments	19

myspace, image map, rollovers, fake