Closed Thread Icon

Preserved Topic: hover images Pages that link to <a href="https://ozoneasylum.com/backlink?for=18489" title="Pages that link to Preserved Topic: hover images" rel="nofollow" >Preserved Topic: hover images\
 
Author Thread
InSiDeR
Maniac (V) Inmate

From: Oblivion
Insane since: Sep 2001

 posted posted 10-20-2001 17:08

alright I know how to make an image link, but how do I make another image hover over that?
mr.maX
Maniac (V) Mad Scientist

From: Belgrade, Serbia
Insane since: Sep 2000

 posted posted 10-20-2001 17:35

Doc's tutorial can be found here: http://www.handson.nu/CODING/javascript.shtml

BTW I also wrote a rollover script called "maxMenu" (two states and three states versions) and it could be found here in the Asylum, just perform a search for "maxMenu"...
InSiDeR
Maniac (V) Inmate

From: Oblivion
Insane since: Sep 2001

 posted posted 10-20-2001 18:48

Ive got it worken thanks
InSiDeR
Maniac (V) Inmate

From: Oblivion
Insane since: Sep 2001

 posted posted 10-24-2001 00:59

alright i can get 2 working that i know, but i have 10 pics that i want to turn links into and i can only get 2,

this is the script i have in the <head> part of my site that i got from doc ozone

<SCRIPT LANGUAGE="JavaScript">
<!--DocOzone's Javascript code, copyright 1998
// Feel free to borrow and modify this code,
// but be sure leave this credit in the source!
// Your pal, -Dr. Thaddeus Ozone-
// .http://www.ozones.com/

window.onerror=null;
// that was to turn off error reporting...

if (document.images) {
names = new Array( "news" , "Archive");
buttons = new Array(4);
for (m=0; m<=3; m++) {
buttons[m] = new Image(); }
buttons[0].src = "news.bmp";
buttons[1].src = "Archive.bmp";
buttons[2].src = "news1.bmp";
buttons[3].src = "Archive1.bmp";
buttons[4].src = "Boards.bmp"}

function swap(des,num) {
if (document.images) {
document.images[names[des]].src = buttons[num].src; }}

// close the comment tag, this hides the script from really old browsers! -->
</SCRIPT>


and this is the 2 links that i am using and the rest of the .bmp's i want to make links like the first 2 but dont know how

<a href="news.html"
onMouseover="swap(0,2);
window.status='Current News';
return true"
onMouseout="swap(0,0)" target="C">
<img src="news.bmp" name="news" border="0"></a><br>
<a href="archive.html"
onMouseover="swap(1,3);
window.status='News Archive';
return true"
onMouseout="swap(1,1)" target="C">
<img src="Archive.bmp" name="Archive" border="0"></a><br>
<img src="http://insidershak.hypermart.net/Boards.bmp"></a><br>
<img src="http://insidershak.hypermart.net/Comedy.bmp"<br>
<img src="http://insidershak.hypermart.net/Games.bmp"><br>
<img src="http://insidershak.hypermart.net/Downloads.bmp"><br>
<img src="http://insidershak.hypermart.net/Staff.bmp"><br>
<img src="http://insidershak.hypermart.net/Join.bmp"><br>
<img src="http://insidershak.hypermart.net/Dis.bmp"><br>
<img src="http://insidershak.hypermart.net/Music.bmp">

And you can see what it looks like for yourself Here or at www.InSiDeRShaK.net

Wakkos
Maniac (V) Mad Scientist

From: Azylum's Secret Lab
Insane since: Oct 2000

 posted posted 10-24-2001 01:51

I don't know a shit about JS, but I've use the Doc's script, so let me try:

When I work with the Doc's Swap (Is the only that I use, very Cool, Thanks Doc!) I do this to make my life simple:

10 links, right? then you'll need 20 images


I define the array in the following way:

First you have all the normals buttoms

buttons[0].src = "link1normal.bmp";
buttons[1].src = "link2normal.bmp";
buttons[2].src = "link3normal.bmp";
buttons[3].src = "link4normal.bmp";
buttons[4].src = "link5normal.bmp";
buttons[5].src = "link6normal.bmp";
buttons[6].src = "link7normal.bmp";
buttons[7].src = "link8normal.bmp";
buttons[8].src = "link9normal.bmp";
buttons[9].src = "link10normal.bmp";

And Then I define the 'Hover' buttoms

buttons[10].src = "link11hover.bmp";
buttons[11].src = "link12hover.bmp";
buttons[12].src = "link13hover.bmp";
buttons[13].src = "link14hover.bmp";
buttons[14].src = "link15hover.bmp";
buttons[15].src = "link16hover.bmp";
buttons[16].src = "link17hover.bmp";
buttons[17].src = "link18hover.bmp";
buttons[18].src = "link19hover.bmp";
buttons[19].src = "link20hover.bmp";


So, when I'm declaring the swap in the link, I know that 0 >10, 1 > 11 and so on and is more control...

<a href="news.html" onMouseover="swap(0,10); window.status='Current News'; return true" onMouseout="swap(0,0)" target="C">

<a href="news.html" onMouseover="swap(1,11); window.status='Current News'; return true" onMouseout="swap(1,1)" target="C">

<a href="news.html" onMouseover="swap(2,12); window.status='Current News'; return true" onMouseout="swap(2,2)" target="C">

See? each number in the swap increase by 1.

Don't forget to declare the array number!!

code:
buttons = new Array(20);

for (m=0; m<=19; m++) {



Uff!!! I hope it helps!!! I'm not too good on this!


Edit> Stuff......





[This message has been edited by Wakkos (edited 10-24-2001).]
InSiDeR
Maniac (V) Inmate

From: Oblivion
Insane since: Sep 2001

 posted posted 10-24-2001 02:19

Ya dood but how would that entire script that goes in the <head> part look like? the entire thing becuase i am confused what to put after the first array.
Wakkos
Maniac (V) Mad Scientist

From: Azylum's Secret Lab
Insane since: Oct 2000

 posted posted 10-24-2001 02:24

I think that you want this:

code:
<SCRIPT LANGUAGE="JavaScript">

<!--DocOzone's Javascript code, copyright 1998

// Feel free to borrow and modify this code,

// but be sure leave this credit in the source!

// Your pal, -Dr. Thaddeus Ozone-

// .http://www.ozones.com/



window.onerror=null;

// that was to turn off error reporting...



if (document.images) {

names = new Array( "news" , "Archive");

buttons = new Array(20);for (m=0; m<=19; m++) {

buttons[0].src = "link1normal.bmp";

buttons[1].src = "link2normal.bmp";

buttons[2].src = "link3normal.bmp";

buttons[3].src = "link4normal.bmp"; 

buttons[4].src = "link5normal.bmp";

buttons[5].src = "link6normal.bmp";

buttons[6].src = "link7normal.bmp";

buttons[7].src = "link8normal.bmp";

buttons[8].src = "link9normal.bmp";

buttons[9].src = "link10normal.bmp";





buttons[10].src = "link11hover.bmp";

buttons[11].src = "link12hover.bmp";

buttons[12].src = "link13hover.bmp";

buttons[13].src = "link14hover.bmp";

buttons[14].src = "link15hover.bmp";

buttons[15].src = "link16hover.bmp";

buttons[16].src = "link17hover.bmp";

buttons[17].src = "link18hover.bmp";

buttons[18].src = "link19hover.bmp";

buttons[19].src = "link20hover.bmp"} //not sure if the last one has ';' 





function swap(des,num) {

if (document.images) {

document.images[names[des]].src = buttons[num].src; }}



// close the comment tag, this hides the script from really old browsers! -->

</SCRIPT>



Edit> Stuff


[This message has been edited by Wakkos (edited 10-24-2001).]
InSiDeR
Maniac (V) Inmate

From: Oblivion
Insane since: Sep 2001

 posted posted 10-24-2001 03:02

alright i tryed that and it didnt happen, heres the script for the <head> part

<SCRIPT LANGUAGE="JavaScript"><!--DocOzone's Javascript code, copyright 1998// Feel free to borrow and modify this code,// but be sure leave this credit in the source!// Your pal, -Dr. Thaddeus Ozone-// .http://www.ozones.com/window.onerror=null;// that was to turn off error reporting...if (document.images) {names = new Array( "news" , "Archive"); buttons = new Array(20);for (m=0; m<=19; m++) {
buttons[0].src = "news.bmp";
buttons[1].src = "Archive.bmp";
buttons[2].src = "Boards.bmp";
buttons[3].src = "Comedy.bmp";
buttons[4].src = "Games.bmp";
buttons[5].src = "Downloads.bmp";
buttons[6].src = "Staff.bmp";
buttons[7].src = "Join.bmp";
buttons[8].src = "Dis.bmp";
buttons[9].src = "Music.bmp";
buttons[10].src = "news1.bmp";
buttons[11].src = "Archive1.bmp";
buttons[12].src = "Boards1.bmp";
buttons[13].src = "Comedy1.bmp";
buttons[14].src = "Games1.bmp";
buttons[15].src = "Downloads1.bmp";
buttons[16].src = "Staff1.bmp";
buttons[17].src = "Join1.bmp";
buttons[18].src = "Dis1.bmp";
buttons[19].src = "Music1.bmp";}
function swap(des,num) {if (document.images) {document.images[names[des]].src = buttons[num].src; }}
// close the comment tag, this hides the script from really old browsers! -->
</SCRIPT>

And heres the links i used

<a href="news.html" onMouseover="swap(0,10); window.status='Current News'; return true"
onMouseout="swap(0,0)" target="C">
<img src="news.bmp" name="news" border="0"></a><br>
<a href="archive.html" onMouseover="swap(1,11); window.status='News Archive'; return true" onMouseout="swap(1,1)" target="C">
<img src="Archive.bmp" name="Archive" border="0"></a><br>
<a href="members2.hypermart.net/InSiDeRShaK" onMouseover="swap(2,12); window.status='Boards'; return true" onMouseout="swap(2,2)" target="C">
<img src="Boards.bmp" name="Boards" border="0"></a>

see if you can fix that cause i dunno whats wrong
Wakkos
Maniac (V) Mad Scientist

From: Azylum's Secret Lab
Insane since: Oct 2000

 posted posted 10-24-2001 03:17
code:
<HTML>

<HEAD>



<META NAME="GENERATOR" CONTENT="MAX's HTML Beauty++ ME">

<SCRIPT LANGUAGE="JavaScript">

<!--DocOzone's Javascript code, copyright 1998

// Feel free to borrow and modify this code,

// but be sure leave this credit in the source!

// Your pal, -Dr. Thaddeus Ozone-

// .http://www.ozones.com/

window.onerror=null;

// that was to turn off error reporting...



if (document.images) {

names = new Array( "news" , "Archive" , "boards" , "comedy" , "games" , "downloads" , "staff" , "join" , "dis" , "music"); 

buttons = new Array(20);

for (m=0; m<=19; m++) {

buttons[m] = new Image(); }

buttons[0].src = "news.bmp";

buttons[1].src = "Archive.bmp";

buttons[2].src = "Boards.bmp";

buttons[3].src = "Comedy.bmp";

buttons[4].src = "Games.bmp";

buttons[5].src = "Downloads.bmp";

buttons[6].src = "Staff.bmp";

buttons[7].src = "Join.bmp";

buttons[8].src = "Dis.bmp";

buttons[9].src = "Music.bmp";

buttons[10].src = "news1.bmp";

buttons[11].src = "Archive1.bmp";

buttons[12].src = "Boards1.bmp";

buttons[13].src = "Comedy1.bmp";

buttons[14].src = "Games1.bmp";

buttons[15].src = "Downloads1.bmp";

buttons[16].src = "Staff1.bmp";

buttons[17].src = "Join1.bmp";

buttons[18].src = "Dis1.bmp";

buttons[19].src = "Music1.bmp";}

function swap(des,num) 

{if (document.images) 

{document.images[names[des]].src = buttons[num].src; 

}

}

// close the comment tag, this hides the script from really old browsers! -->

</SCRIPT>



</HEAD>



<BODY>

<A HREF="X.html"  onMouseover="swap(0,10);"

   onMouseout="swap(0,0);" target="C"><IMG NAME="news" SRC="news.bmp" WIDTH="105" HEIGHT="33" BORDER="0"></A>



</BODY>

</HTML>




Errors:

Didn't define the aray:

names = new Array( "news" , "Archive" , "boards" , "comedy" , "games" , "downloads" , "staff" , "join" , "dis" , "music");

For some reason, you were missing this:

buttons[m] = new Image(); }

In every Image, the name in the array: NAME="news" for news and so on...



[This message has been edited by Wakkos (edited 10-24-2001).]
InSiDeR
Maniac (V) Inmate

From: Oblivion
Insane since: Sep 2001

 posted posted 10-24-2001 04:51

thanks im going to bed now but ill try it tommorow and see if it works, you have really been a help to me


Wakkos
Maniac (V) Mad Scientist

From: Azylum's Secret Lab
Insane since: Oct 2000

 posted posted 10-24-2001 05:13

Going to bed?? After *I* finished this????

NO WAY!

You stay here and finish this right now and tell me if worked or not!!
Is my first help in JS and you are going nowhere without this working!!!


Come back here you coward!!!!!!!!!
InSiDeR
Maniac (V) Inmate

From: Oblivion
Insane since: Sep 2001

 posted posted 10-24-2001 17:41

hehehe alright im awake now and it didnt work im just going to go ahead and give you the entire script to my site which is insidershak.hyperart.net/Non.html


<html>
<head>
<title>I-n-S-i-D-e-R-s S-h-a-K</title>
<style><!--a{text-decoration:none}//--></style>
<style><!--a:hover{color:white; }--></style>

<SCRIPT LANGUAGE="JavaScript">
<!--DocOzone's Javascript code, copyright 1998
// Feel free to borrow and modify this code,
// but be sure leave this credit in the source!
// Your pal, -Dr. Thaddeus Ozone-
// .http://www.ozones.com/
window.onerror=null;
// that was to turn off error reporting...
if (document.images) {names = new Array( "news" , "Archive" , "boards" , "comedy" , "games" , "down
loads" , "staff" , "join" , "dis" , "music");
buttons = new Array(20);
for (m=0; m<=19; m++) {
buttons[m] = new Image(); }
buttons[0].src = "news.bmp";
buttons[1].src = "Archive.bmp";
buttons[2].src = "Boards.bmp";
buttons[3].src = "Comedy.bmp";
buttons[4].src = "Games.bmp";
buttons[5].src = "Downloads.bmp";
buttons[6].src = "Staff.bmp";
buttons[7].src = "Join.bmp";
buttons[8].src = "Dis.bmp";
buttons[9].src = "Music.bmp";
buttons[10].src = "news1.bmp";
buttons[11].src = "Archive1.bmp";
buttons[12].src = "Boards1.bmp";
buttons[13].src = "Comedy1.bmp";
buttons[14].src = "Games1.bmp";
buttons[15].src = "Downloads1.bmp";
buttons[16].src = "Staff1.bmp";
buttons[17].src = "Join1.bmp";
buttons[18].src = "Dis1.bmp";
buttons[19].src = "Music1.bmp";}
function swap(des,num)
{if (document.images)
{document.images[names[des]].src = buttons[num].src;
}
{
// close the comment tag, this hides the script from really
old browsers! -->
</SCRIPT>

</head>
<body bgcolor="black">
<body link="1688AD" vlink="1688AD" text="steelblue">
<div style="position:absolute;top:0px;left:0px;">
<img src="MetalBanner1.bmp">
<A HREF="news.html" onMouseover="swap(0,10);"
onMouseout="swap(0,0);" target="C"><IMG NAME="news"
SRC="news.bmp" BORDER="0"></A><br>
<a href="archive.html" onMouseover="swap(1,11);
window.status='News Archive'; return true" onMouseout="swap
(1,1)" target="C">
<img src="Archive.bmp" name="Archive" border="0"></a><br>
<a href="http://members2.boardhost.com/InSiDeRShaK"
onMouseover="swap(2,12); window.status='Boards'; return
true" onMouseout="swap(2,2)" target="C">
<img src="Boards.bmp" name="Boards" border="0"></a><br>
<img src="http://insidershak.hypermart.net/Comedy.bmp"><br>
<img src="http://insidershak.hypermart.net/Games.bmp"><br>
<img src="http://insidershak.hypermart.net/Downloads.bmp"><br>
<img src="http://insidershak.hypermart.net/Staff.bmp"><br>
<img src="http://insidershak.hypermart.net/Join.bmp"><br>
<img src="http://insidershak.hypermart.net/Dis.bmp"><br>
<img src="http://insidershak.hypermart.net/Music.bmp">
</div>

<div style="position:absolute;top:125px;left:140px;">
<iframe src="news.html" width="660" height=470" align="right" name="C" scrolling="yes" noresize frameborder="0"></iframe>
</div>
</body>
</html>
<noscript>

<!--#echo banner=""-->

</noscript>
Wakkos
Maniac (V) Mad Scientist

From: Azylum's Secret Lab
Insane since: Oct 2000

 posted posted 10-24-2001 18:10

Your error is here:

code:
<a href="news.html" onMouseover="swap(0,10); window.status='Current News'; return true" onMouseout="swap(0,0)" target="C"><IMG NAME="news" SRC="news.bmp" BORDER="0"></A><br>

<a href="archive.html" onMouseover="swap(1,11); window.status='News Archive'; return true" onMouseout="swap(1,1)" target="C"><img src="Archive.bmp" name="Archive" border="0"></a><br>

<a href="http://members2.boardhost.com/InSiDeRShaK" onMouseover="swap(2,12); window.status='Boards'; return true" onMouseout="swap(2,2)" target="C"><img src="Boards.bmp" name="boards" border="0"></a>



Be carefull with the images name, they are case sensitives....

Edit> Here you missed a } :
function swap(des,num)
{if (document.images)
{document.images[names[des]].src = buttons[num].src;
}
{ (tis one should be }
// close the comment tag, this hides the script from really
old browsers! -->
</SCRIPT>


[This message has been edited by Wakkos (edited 10-24-2001).]
Wakkos
Maniac (V) Mad Scientist

From: Azylum's Secret Lab
Insane since: Oct 2000

 posted posted 10-24-2001 18:13

So, What IO got working is this:

code:
<html>

<head>

<title>I-n-S-i-D-e-R-s S-h-a-K</title>

<style><!--a{text-decoration:none}//--></style>

<style><!--a:hover{color:white; }--></style>



<SCRIPT LANGUAGE="JavaScript">

<!--DocOzone's Javascript code, copyright 1998

// Feel free to borrow and modify this code,

// but be sure leave this credit in the source!

// Your pal, -Dr. Thaddeus Ozone-

// .http://www.ozones.com/

window.onerror=null;

// that was to turn off error reporting...

if (document.images) {

names = new Array("news" , "Archive" , "boards" , "comedy" , "games" , "downloads" , "staff" , "join" , "dis" , "music"); 

buttons = new Array(20);

for (m=0; m<=19; m++) {

buttons[m] = new Image(); }

buttons[0].src = "news.bmp";

buttons[1].src = "Archive.bmp";

buttons[2].src = "Boards.bmp";

buttons[3].src = "Comedy.bmp";

buttons[4].src = "Games.bmp";

buttons[5].src = "Downloads.bmp";

buttons[6].src = "Staff.bmp";

buttons[7].src = "Join.bmp";

buttons[8].src = "Dis.bmp";

buttons[9].src = "Music.bmp";

buttons[10].src = "news1.bmp";

buttons[11].src = "Archive1.bmp";

buttons[12].src = "Boards1.bmp";

buttons[13].src = "Comedy1.bmp";

buttons[14].src = "Games1.bmp";

buttons[15].src = "Downloads1.bmp";

buttons[16].src = "Staff1.bmp";

buttons[17].src = "Join1.bmp";

buttons[18].src = "Dis1.bmp";

buttons[19].src = "Music1.bmp";}

function swap(des,num){

if (document.images){

document.images[names[des]].src = buttons[num].src; 

}

}

// close the comment tag, this hides the script from really old browsers! -->

</SCRIPT>



</head>

<body bgcolor="black">

<body link="1688AD" vlink="1688AD" text="steelblue">

<div style="position:absolute;top:0px;left:0px;">

<img src="MetalBanner1.bmp">

<a href="news.html" onMouseover="swap(0,10); window.status='Current News'; return true" onMouseout="swap(0,0)" target="C"><IMG NAME="news" SRC="news.bmp" BORDER="0"></A><br>

<a href="archive.html" onMouseover="swap(1,11); window.status='News Archive'; return true" onMouseout="swap(1,1)" target="C"><img src="Archive.bmp" name="Archive" border="0"></a><br>

<a href="http://members2.boardhost.com/InSiDeRShaK" onMouseover="swap(2,12); window.status='Boards'; return true" onMouseout="swap(2,2)" target="C"><img src="Boards.bmp" name="boards" border="0"></a><br>

<img src="http://insidershak.hypermart.net/Comedy.bmp"><br>

<img src="http://insidershak.hypermart.net/Games.bmp"><br>

<img src="http://insidershak.hypermart.net/Downloads.bmp"><br>

<img src="http://insidershak.hypermart.net/Staff.bmp"><br>

<img src="http://insidershak.hypermart.net/Join.bmp"><br>

<img src="http://insidershak.hypermart.net/Dis.bmp"><br>

<img src="http://insidershak.hypermart.net/Music.bmp">

</div>



<div style="position:absolute;top:125px;left:140px;">

<iframe src="news.html" width="660" height=470" align="right" name="C" scrolling="yes" noresize frameborder="0"></iframe>

</div>

</body>

</html>
InSiDeR
Maniac (V) Inmate

From: Oblivion
Insane since: Sep 2001

 posted posted 10-24-2001 20:36

I got it working!!! w00t!!!!! thanks
Wakkos
Maniac (V) Mad Scientist

From: Azylum's Secret Lab
Insane since: Oct 2000

 posted posted 10-24-2001 20:54

Cool!!

I did something useful in my life!!

Now I can die in peace!
InSiDeR
Maniac (V) Inmate

From: Oblivion
Insane since: Sep 2001

 posted posted 10-24-2001 21:03

LoL thanks alot~!

« Backwards — Onwards »

Show Forum Drop Down Menu