mlandrethsf
03-11-2006, 12:36 PM
Hi all-
A little background is necessary before we get to the problem-
1. I am creating this code for a myspace profile, which does not allow the use of javascript.
2. My goal is for an image to appear when a user runs their mouse over a certain part of the page.
3. My logic (feel free to set me straight):
since i cant use the 'onmouseover' 'onclick' commands that i want, i have tried to get in through the back door by creating a background that includes a 'base image' (you'll see what I'm talking about), then add a *transparent* active image with a hover link of the actual image i want to appear. So far, I have gotten everything to work except one little feature: I can not position the activeimage on the page without losing the hover effect. This makes the whole code useless unless i want this effect in the upper left corner, or centered or something. I need the flexibility to choose exactly where everything goes.
I have created a sample code to illustrate the dilemma. I have left the border 'on' for the transparent (active)image so you can see where it is on the page. Obviously i wont be using it on my profile page.
Your goal - get the fried egg to appear when the user mouses over the center of the plate. Have fun.
Here's the code:
<!MAKE HOVER EGG-->
<STYLE type="text/css">
A:hover{background:url(http://img85.imageshack.us/img85/4885/eggs5ll.gif);
}
hr{background-image:url(http://img85.imageshack.us/img85/4885/eggs5ll.gif);
</STYLE>
<br />
<a href="http://www.mypimpspace.com/" target="_blank">
</a>
<style type="text/css">
{ Background Properties }
table, tr, td { background-color:transparent; border:none; border-width:0;}
body {
background-image:url('http://img124.imageshack.us/img124/3986/plate1yw.png');
background-attachment: fixed;
background-position:top left;
background-repeat:no-repeat;
}
</style>
<!TRANSPARENT LINK-->
<a href="http://www.myspace.com/tweetersrevenge"><img src="http://img127.imageshack.us/img127/93/glitterkitty16ru.gif" style=" {"position:absolute; left:1000px; top:1300px; border:0}></a>
A little background is necessary before we get to the problem-
1. I am creating this code for a myspace profile, which does not allow the use of javascript.
2. My goal is for an image to appear when a user runs their mouse over a certain part of the page.
3. My logic (feel free to set me straight):
since i cant use the 'onmouseover' 'onclick' commands that i want, i have tried to get in through the back door by creating a background that includes a 'base image' (you'll see what I'm talking about), then add a *transparent* active image with a hover link of the actual image i want to appear. So far, I have gotten everything to work except one little feature: I can not position the activeimage on the page without losing the hover effect. This makes the whole code useless unless i want this effect in the upper left corner, or centered or something. I need the flexibility to choose exactly where everything goes.
I have created a sample code to illustrate the dilemma. I have left the border 'on' for the transparent (active)image so you can see where it is on the page. Obviously i wont be using it on my profile page.
Your goal - get the fried egg to appear when the user mouses over the center of the plate. Have fun.
Here's the code:
<!MAKE HOVER EGG-->
<STYLE type="text/css">
A:hover{background:url(http://img85.imageshack.us/img85/4885/eggs5ll.gif);
}
hr{background-image:url(http://img85.imageshack.us/img85/4885/eggs5ll.gif);
</STYLE>
<br />
<a href="http://www.mypimpspace.com/" target="_blank">
</a>
<style type="text/css">
{ Background Properties }
table, tr, td { background-color:transparent; border:none; border-width:0;}
body {
background-image:url('http://img124.imageshack.us/img124/3986/plate1yw.png');
background-attachment: fixed;
background-position:top left;
background-repeat:no-repeat;
}
</style>
<!TRANSPARENT LINK-->
<a href="http://www.myspace.com/tweetersrevenge"><img src="http://img127.imageshack.us/img127/93/glitterkitty16ru.gif" style=" {"position:absolute; left:1000px; top:1300px; border:0}></a>