PDA

View Full Version : it wont work? :(


veggie1232
November 26th, 2005, 08:01
http://sarah.emokids.net/negative.html
http://isgexpression.piczo.com/?preview=y&g=11360754&cr=2&rfm=y


this roll over effect wont work instead of the image chaning to the other image it just goes above it :doh!:

HERE IS THE CODE





<html>
<head>

</head>
<body>
<style>
.image1 {background:url(http://i9.photobucket.com/albums/a74/iheartdminor/magneticmanganese/myspace/livejournallink.jpg); background-repeat:no-repeat; width:200px; height:80px;}
.image1 a {height: 80px;
width: 200px;}
.image2invisable {visibility:hidden;}
a.image2 { height:80px; width:200px; }
a.image2:hover { background: url(http://i9.photobucket.com/albums/a74/iheartdminor/magneticmanganese/myspace/yourvoidlink.jpg); background-repeat:no-repeat; width:200px; position:relative; top:-80px; height:80px;}
</style>
</head>
<body>
<div class="image1">
<a href="linklinkurl.goeshere" class="image2"><img class="image2invisable" src="http://i9.photobucket.com/albums/a74/iheartdminor/magneticmanganese/myspace/yourvoidlink.jpg" width=200 height=80></a>
</div>
</body></html>


if anyone could fix this code for me that would be awsome

also it cant have position absolute tags in it or anything like that

thanks!
felguard
November 26th, 2005, 16:49
.image1 {background:url(http://i9.photobucket.com/albums/a74/iheartdminor/magneticmanganese/myspace/livejournallink.jpg); background-repeat:no-repeat; width:200px; height:80px;}
.image1 a {height: 80px;
width: 200px;}
.image2invisable {visibility:hidden;}
a.image2 { height:80px; width:200px; }
a.image2:hover { background: url(http://i9.photobucket.com/albums/a74/iheartdminor/magneticmanganese/myspace/yourvoidlink.jpg); background-repeat:no-repeat; width:200px; position:relative; top:-80px; height:80px;}

this is suppose to be on like a style.css page.
veggie1232
November 26th, 2005, 19:43
what about the other half of the code? body part :)
stuffradio
November 27th, 2005, 01:54
here is the one I wrote. It's much simpler to use than the one you have there...


<html>
<body>
<a href="http://www.ubuntuforums.org" onMouseOver="document.Microsoft.src='linux.jpg'" onMouseOut="document.Microsoft.src='microsoft.jpg'">
<img src="microsoft.jpg" name="Microsoft" border='0'
onMouseOver="document.Microsoft.src='linux.jpg'"
onMouseOut="document.Microsoft.src='microsoft.jpg'"></a>
<p><br><a href="http://www.apple.com" onMouseOver="document.ipod.src='nano.jpg'" onMouseOut="document.ipod.src='ipod.jpg'">
<img src="ipod.jpg" name="ipod" border='0'
onMouseOver="document.ipod.src='nano.jpg'"
onMouseOut="document.ipod.src='ipod.jpg'"></a>
<p><br><a href="www.google.com/talk" onMouseOver="document.google.src='talk.jpg'" onMouseOut="document.google.src='google.jpg'">
<img src="google.jpg" name="google" border='0'
onMouseOver="document.google.src='talk.jpg'"
onMouseOut="document.google.src='google.jpg'"></a>
<p><br><a href="http://microsoft.com" onMouseOver="document.xbox.src='playstation.jpg'" onMouseOut="document.xbox.src='xbox.jpg'">
<img src="xbox.jpg" name="xbox" border='0'
onMouseOver="document.xbox.src='playstation.jpg'"
onMouseOut="document.xbox.src='xbox.jpg'"></a>
<br><p><a href="www.counterstrike.net" onMouseOver="document.cs.src='snipe.jpg'" onMouseOut="document.cs.src='cs.jpg'">
<img src="cs.jpg" name="cs" border='0'
onMouseOver="document.cs.src='cs.jpg'"
onMouseOut="document.cs.src='snipe.jpg'"></a>
</html>
You can see the result here: http://wuensche.ca/cis/jproject/hover.html
veggie1232
November 27th, 2005, 05:16
the only problem with that is in stead of the images be from your computer i need to link them and its just 2 images so when you put your mouse over the first image it changes to the second and then it links to one thing and all i have to do is add a link to th image :D
stuffradio
November 27th, 2005, 18:45
huh? I don't get what you just said.. please elaborate and explain a bit better.
veggie1232
November 28th, 2005, 01:13
well the html u have is like a tower banner with a bunch of images and each one links to a site but all i need is 2 images and for them to link to same place

when you put your mouse over the first image it changes to the second image and u click it and it will take you to that link

all i need is the html and in that html 3 places to put a link

one of the link would be image 1 the image you see before you put your mouse over it

the second link would be imae 2 the image you would see once your mouse is over the imagge

and the 3rd link which will bewhere it takes u once you click the image

im not good with html AT ALL so all i need is 3 places to add 3 links image , image 2, and the link where once u click on it it takes u to that link

and it cant have positon absolute in it
veggie1232
December 3rd, 2005, 07:36
i elaborated and u still havnt replied :(
themoose
December 3rd, 2005, 15:32
Not sure if this is exactly what you're after, but this is what i use.


<head>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home2','','images/menu/home_on.gif',1)">
<img src="images/menu/home_off.gif" name="home2" border="0" alt="Home" >
</a>


note the "name=" tags and the <head> tags. You will have to preload the images as well.



<script type="text/javascript">
//<![CDATA[
function postLoad(){
if(!window.name.match(/preLoad.complete/gi)){
var images = new Array('images/menu/home_on.gif',
'images/menu/forum_on.gif',
'images/menu/creds_on.gif',
'images/menu/gfx_on.gif',
'images/menu/sites_on.gif',
'images/menu/email_on.gif',
'images/menu/design_on.gif',);


var loader = new Array();
for(var i=0; i<images.length; i++){
loader[i] = new Image();
loader[i].src = images[i];
}
window.name = 'preLoad.complete';
}
}
//]]>
</script>



hope that helps :)