Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

DHTML effects

Status
Not open for further replies.
Riksta

Riksta

Programmer
Dec 7, 2003
16
GB
Hi,

I have a menu on the default page 1-5.

Now when someone scrolls over the headings they should glow. I get the first one to glow but what I would like to know is how to get the rest of them to glow. I have changed the variables about etc but still no joy, it's a very simple process but im having no luck (you should see the bruises on me).
Here is the code:

<html>
<head>
<style>
h1
{
width:400;
}
</style>

<script type=&quot;text/javascript&quot;>
var i
function glow()
{
i=0
interval=setInterval(&quot;makeglow()&quot;,10)
}

function back()
{
clearInterval(interval)
document.getElementById('myHeader').style.filter=false
}

function makeglow()
{
i++
if (i<5)
{
document.getElementById('myHeader').style.filter=&quot;glow(strength=&quot; + i + &quot;)&quot;
}
else if (window.interval)
{
clearInterval(interval)
}
}

</script>
</head>

<body>
<h1 id=&quot;myHeader&quot; onmouseover=&quot;glow()&quot; onmouseout=&quot;back()&quot;>Mouse over this header</h1>
</body>

</html>

Any advice would be helpful

Thanks and a happy new year

 
Sort by date Sort by votes
Riksta,

Try the following:

Code: 
<html>
<head>
<style>
h1
{
	width: 400px;
}
</style>

<script type=&quot;text/javascript&quot;>
var i;

function glow(elementId)
{
	i = 0;
	interval = setInterval('makeglow(\'' + elementId + '\');', 10);
}

function back(elementId)
{
	clearInterval(interval);
	document.getElementById(elementId).style.filter = false;
}

function makeglow(elementId)
{
	i++;
	if (i < 5) document.getElementById(elementId).style.filter = 'glow(strength=' + i + ')';
	else if (window.interval) clearInterval(interval);
}

</script>
</head>

<body>
<h1 id=&quot;myHeader&quot; onmouseover=&quot;glow(this.id)&quot; onmouseout=&quot;back(this.id)&quot;>Mouse over this header</h1>
<h1 id=&quot;myHeader2&quot; onmouseover=&quot;glow(this.id)&quot; onmouseout=&quot;back(this.id)&quot;>Mouse over this header</h1>
<h1 id=&quot;myHeader3&quot; onmouseover=&quot;glow(this.id)&quot; onmouseout=&quot;back(this.id)&quot;>Mouse over this header</h1>
</body>

</html>

Hope this helps!

Dan
 
Upvote 0 Downvote
Dan,

That was perfect mate!

Thanks for your help.

Can you recommend any good websites, I would like to do more funky things like flip images etc etc.

Thanks again

Rik
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

gorkamolero
  • Locked
  • Question
hover effects on horizontal dropdown css menu (small problem)
Replies
0
Views
49
gorkamolero
gorkamolero
danmat46
  • Locked
  • Question
DHTML window.open help
Replies
0
Views
74
danmat46
danmat46
canajun
  • Locked
  • Question
DHTML popup to populate textfields
Replies
1
Views
88
vacunita
vacunita
SteveHigh
  • Locked
  • Question
Menu effects
Replies
2
Views
48
BillyRayPreachersSon
BillyRayPreachersSon
NickyJay
  • Locked
  • Question
real time form validation and DHTML
Replies
2
Views
76
bam720
bam720

Part and Inventory Search

Sponsor

Back
Top