/    Sign up×
Community /Pin to ProfileBookmark

Please, I need help with mouseover div

I’m trying to have a <div> area replaced by another when a link is being mouseovered.

I took the code from here: [url]http://www.codingforums.com/showthread.php?t=39076[/url]

Everything looks great and in place but the code isn’t working.
In one time it did work on one link but I couldn’t manage to make all the links work.

I must admit, I know nothing about JavaScript.
Can anyone please help me figure this out? thanks!

here’s where I’m stuck:
—————————————–


[code]

<html dir=”rtl”>
<head>

<style type=”text/css”>
table.news {
border-width: 1px; border-spacing: 0px ; border-style: solid; border-color:

#1e6d5a ; border-collapse: collapse;
}
</style>

<script language=”JavaScript”>
//fades layer in
ie5 = (document.all && document.getElementById);
ns6 = (!document.all && document.getElementById);
opac = 0;

function fadeIn(articale1) {
if(opac != 100){
opac2 = 100;
opac+=1;
if(ie5) document.getElementById(‘articale1’).filters.alpha.opacity = opac;
if(ns6) document.getElementById(‘articale1’).style.MozOpacity = opac/465;
setTimeout(‘fadeIn(articale2)’, 0);
}
function fadeIn() {
if(opac != 100){
opac2 = 100;
opac+=1;
if(ie5) document.getElementById(‘articale2’).filters.alpha.opacity = opac;
if(ns6) document.getElementById(‘articale2’).style.MozOpacity = opac/465;
setTimeout(‘fadeIn()’, 0);

}

}
</script>

<style>
.articale {position:absolute; right:0px; top:0px; width:465px; height:192px;
clip:rect(0,465,465,0); filter: alpha(opacity=100); -moz-opacity:100%;
background-color:red; z-index:1;}
</style>

</head>

<body>

<div id=”articale1″ class=”articale”>
<table border=0 CELLSPACING=0 CELLPADDING=0 width=465

class=news>
<tr><td><IMG SRC=”images/stevie1.gif”><br>
</td></tr><tr><td ALIGN=right VALIGN=middle bgcolor=white colspan=6

height=20>
<font face=tahoma size=2 color=#9e2a28>
<b>&#1493;&#1497;&#1491;&#1488;&#1493;: &#1510;&#1508;&#1493; &#1489;&#1505;&#1497;&#1511;&#1493;&#1512; &#1506;&#1493;&#1504;&#1514; 2007/8 &#1513;&#1500; &#1505;&#1496;&#1497;&#1489;&#1503; &#1490;’&#1512;&#1488;&#1512;&#1491; > 01/06/2008

10:51
</td></tr><tr><td ALIGN=right VALIGN=middle bgcolor=#1e6d5a

colspan=6 height=54>
<font face=tahoma size=1 color=white><b>
&#1500;&#1502;&#1512;&#1493;&#1514; &#1506;&#1493;&#1504;&#1492; &#1502;&#1488;&#1499;&#1494;&#1489;&#1514; &#1506;&#1489;&#1493;&#1512; &#1492;&#1511;&#1489;&#1493;&#1510;&#1492;, &#1500;&#1505;&#1496;&#1497;&#1489;&#1497; &#1490;’&#1497; &#1492;&#1497;&#1497;&#1514;&#1492; &#1506;&#1493;&#1504;&#1492; &#1504;&#1492;&#1491;&#1512;&#1514;

&#1489;&#1488;&#1493;&#1508;&#1503; &#1488;&#1497;&#1513;&#1497;. &#1492;&#1497;&#1488; &#1499;&#1500;&#1500;&#1492; &#1500;&#1488; &#1502;&#1506;&#1496; &#1513;&#1506;&#1512;&#1497;&#1501; &#1506;&#1493;&#1510;&#1512;&#1497; &#1504;&#1513;&#1497;&#1502;&#1492;, &#1500;&#1488; &#1502;&#1506;&#1496; &#1513;&#1506;&#1512;&#1497;&#1501;

&#1495;&#1513;&#1493;&#1489;&#1497;&#1501; &#1493;&#1495;&#1500;&#1493;&#1511;&#1514; &#1513;&#1508;&#1506; &#1513;&#1500; &#1488;&#1505;&#1497;&#1505;&#1496;&#1497;&#1501; &#1499;&#1502;&#1493; &#1505;&#1500;&#1505;&#1500;&#1514; &#1489;&#1497;&#1499;&#1493;&#1512;&#1497;&#1501; &#1489;&#1495;&#1490; &#1492;&#1513;&#1489;&#1493;&#1506;&#1493;&#1514;.

&#1510;&#1508;&#1493; &#1489;&#1505;&#1497;&#1511;&#1493;&#1512; &#1492;&#1506;&#1493;&#1504;&#1492; &#1513;&#1500; &#1502;&#1505;&#1508;&#1512; 8.
</td></tr></table>
</div>

<div id=”articale2″ class=”articale”>
<table border=0 CELLSPACING=0 CELLPADDING=0 width=465

class=news>
<tr><td><IMG SRC=”images/Irwin1.gif”><br>
</td></tr><tr><td ALIGN=right VALIGN=middle bgcolor=white colspan=6

height=20>
<font face=tahoma size=2 color=#9e2a28>
<b>&#1492;&#1513;&#1495;&#1511;&#1503; &#1492;&#1502;&#1505;&#1493;&#1502;&#1503;: &#1505;&#1496;&#1497;&#1489;&#1503; &#1488;&#1497;&#1512;&#1493;&#1493;&#1497;&#1503; > 03/06/2008 16:09
</td></tr><tr><td ALIGN=right VALIGN=middle bgcolor=#1e6d5a

colspan=6 height=54>
<font face=tahoma size=1 color=white><b>
&#1492;&#1488;&#1514;&#1512; &#1492;&#1512;&#1513;&#1502;&#1497; &#1489;&#1495;&#1512; &#1495;&#1502;&#1497;&#1513;&#1492; &#1488;&#1504;&#1513;&#1497;&#1501; &#1513;&#1497;&#1505;&#1502;&#1504;&#1493; &#1488;&#1514; &#1492;&#1513;&#1495;&#1511;&#1503; &#1492;&#1502;&#1489;&#1496;&#1497;&#1495; &#1513;&#1500;&#1492;&#1501;

&#1500;&#1506;&#1493;&#1504;&#1514; 2008/9. &#1492;&#1513;&#1489;&#1493;&#1506; &#1499;&#1514;&#1489; &#1492;&#1502;&#1490;&#1494;&#1497;&#1503; &#1513;&#1500; &#1500;&#1497;&#1489;&#1512;&#1508;&#1493;&#1500; &#1506;&#1491; &#1490;&#1497;&#1500; 18, &#1490;’&#1493;&#1503; &#1492;&#1497;&#1497;&#1504;&#1505;,

&#1502;&#1510;&#1508;&#1492; &#1502;&#1505;&#1496;&#1497;&#1489;&#1503; &#1488;&#1497;&#1512;&#1493;&#1493;&#1497;&#1503; &#1500;&#1491;&#1489;&#1512;&#1497;&#1501; &#1490;&#1491;&#1493;&#1500;&#1497;&#1501;.
</td></tr></table>
</div>

<div id=”articale3″ class=”articale”>
<table border=0 CELLSPACING=0 CELLPADDING=0 width=465

class=news>
<tr><td><IMG SRC=”images/Season1.gif”><br>
</td></tr><tr><td ALIGN=right VALIGN=middle bgcolor=white colspan=6

height=20>
<font face=tahoma size=2 color=#9e2a28>
<b>&#1500;&#1497;&#1489;&#1512;&#1508;&#1493;&#1500; &#1502;&#1493;&#1491;&#1500; 2007/8: &#1505;&#1497;&#1499;&#1493;&#1501; &#1506;&#1493;&#1504;&#1492; > 27/05/2008 11:06
</td></tr><tr><td ALIGN=right VALIGN=middle bgcolor=#1e6d5a

colspan=6 height=54>
<font face=tahoma size=1 color=white><b>
&#1512;&#1503; &#1505;&#1496;&#1493;&#1510;&#1511;&#1497;, &#1492;&#1497;&#1491;&#1493;&#1506; &#1489;&#1499;&#1497;&#1504;&#1493;&#1497;&#1493; vstots &#1489;&#1508;&#1493;&#1512;&#1493;&#1501;, &#1492;&#1499;&#1497;&#1503; &#1500;&#1499;&#1489;&#1493;&#1491; &#1508;&#1514;&#1497;&#1495;&#1514; &#1488;&#1512;&#1499;&#1497;&#1493;&#1503;

&#1492;&#1511;&#1489;&#1493;&#1510;&#1492; &#1489;&#1488;&#1514;&#1512; &#1513;&#1500;&#1504;&#1493; &#1493;&#1500;&#1499;&#1489;&#1493;&#1491; &#1492;&#1506;&#1493;&#1504;&#1492; &#1513;&#1505;&#1493;&#1507; &#1505;&#1493;&#1507; &#1502;&#1488;&#1495;&#1493;&#1512;&#1497;&#1504;&#1493; &#1505;&#1497;&#1499;&#1493;&#1501; &#1500;&#1506;&#1493;&#1504;&#1514;

2007/8. &#1500;&#1488; &#1499;&#1491;&#1488;&#1497; &#1500;&#1508;&#1505;&#1508;&#1505; &#1488;&#1507; &#1502;&#1497;&#1500;&#1492;.
</td></tr></table>
</div>

<TABLE style=”BORDER-COLLAPSE: collapse; position:absolute; right:0px;

top:268px;” borderColor=#1e6d5a border=1 cellSpacing=0 cellPadding=0

width=465 bgColor=#d1b1b3>
<TR>
<TD style=”WIDTH: 40px; HEIGHT: 40px” width=40 height=40><IMG

src=”images/Stevie2.gif”></TD>
<TD width=115><font face=tahoma size=1 color=black><a href=’#’

onMouseOver=”fadeIn(‘articale1′);”>&#1493;&#1497;&#1491;&#1488;&#1493;: &#1510;&#1508;&#1493; &#1489;&#1505;&#1497;&#1511;&#1493;&#1512; &#1506;&#1493;&#1504;&#1514; 2007/8 &#1513;&#1500;

&#1505;&#1496;&#1497;&#1489;&#1503; &#1490;’&#1512;&#1488;&#1512;&#1491;</a></TD>
<TD width=40 height=40><a href=’#’ onMouseOver=”fadeIn

(‘articale2′);”><IMG src=”images/Irwin2.gif” border=0></a></TD>
<TD width=115><font face=tahoma size=1 color=black><a href=’#’

onMouseOver=”fadeIn(‘articale2′);”>&#1492;&#1513;&#1495;&#1511;&#1503; &#1492;&#1502;&#1505;&#1493;&#1502;&#1503;: &#1505;&#1496;&#1497;&#1489;&#1503;

&#1488;&#1497;&#1512;&#1493;&#1493;&#1497;&#1503;</a></TD>
<TD width=40 height=40><a href=’#’ onMouseOver=”fadeIn();”><IMG

src=”images/Season2.gif” border=0></TD>
<TD width=115><font face=tahoma size=1 color=black><a href=’#’

onMouseOver=”fadeIn();”>&#1500;&#1497;&#1489;&#1512;&#1508;&#1493;&#1500; &#1502;&#1493;&#1491;&#1500; 2007/8: &#1505;&#1497;&#1499;&#1493;&#1501;

&#1506;&#1493;&#1504;&#1492;</a></TD></TR>
<TR>
<TD width=40 height=40><IMG src=”images/Euro2.gif”></TD>
<TD width=115><font face=tahoma size=1 color=black>&#1497;&#1493;&#1512;&#1493; 2008:

&#1492;&#1502;&#1491;&#1512;&#1497;&#1498; &#1492;&#1513;&#1500;&#1501;</TD>
<TD width=40 height=40><IMG src=”images/Promoted2.gif”></TD>
<TD width=115><font face=tahoma size=1 color=black>&#1492;&#1499;&#1512; &#1488;&#1514; &#1492;&#1506;&#1493;&#1500;&#1493;&#1514;

&#1492;&#1495;&#1491;&#1513;&#1493;&#1514;</TD>
<TD width=40 height=40><IMG src=”images/CL2.gif”></TD>
<TD width=115><font face=tahoma size=1 color=black>&#1493;&#1497;&#1491;&#1488;&#1493;: &#1492;&#1497;&#1494;&#1499;&#1512;

&#1489;&#1490;&#1502;&#1512; &#1492;&#1488;&#1497;&#1512;&#1493;&#1508;&#1488;&#1497; &#1492;&#1496;&#1493;&#1489; &#1489;&#1497;&#1493;&#1514;&#1512; &#1489;&#1499;&#1500; &#1492;&#1494;&#1502;&#1504;&#1497;&#1501;</TD></TR></TABLE>

<TABLE style=”position:absolute; right:0px; top:348px;” border=0

cellSpacing=0 cellPadding=4 width=465 height=10>
<TR><TD width=350></TD>
<TD width=115 bgcolor=#9e2a28 align=center><font face=tahoma

size=1 color=white><b>&#1499;&#1514;&#1489;&#1493;&#1514; &#1504;&#1493;&#1505;&#1508;&#1493;&#1514;</TD></TR></TABLE>

</body>
</html>
[/code]

——————–
Sorry you can’t see some of the language.

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@eran1986authorJun 04.2008 — If not that maybe anyone can tell me how to use 6 different <div> areas in this script (the one on the left) instead of images, thanks!

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
Copy linkTweet thisAlerts:
@FangJun 04.2008 — You have 2 functions with the same name. consequently only the 2nd function is used.
function fadeIn(objID) {
if(opac != 100){
opac2 = 100; // ???
opac+=1;
if(ie5) document.getElementById(objID).filters.alpha.opacity = opac;
if(ns6) document.getElementById(objID).style.MozOpacity = opac/465;
setTimeout('fadeIn("'+objID+'")', 10);
}
Copy linkTweet thisAlerts:
@eran1986authorJun 04.2008 — thanks Fang!

Unfortunatly it still doesn't work. ?

As I said before I don't quite know what I doing.

Could you please help me with my second post?


If not that maybe anyone can tell me how to use 6 different <div> areas in this script (the one on the left) instead of images, thanks!

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm[/QUOTE]


Thanks a lot!
×

Success!

Help @eran1986 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...