Link to home
Start Free TrialLog in
Avatar of BR
BRFlag for Türkiye

asked on

how to work with classes instead of id attribute on javascript?

Dear Experts

I have below code, which works perfectly fine. When I mouse over the link, it shows the related picture.

But it works with only one id. I want to work it with class so that I can use it everywhere with the class name.

My main object is that, I want to create a dynamic page with php and use this javascript code so that I can show the related picture when mouse is over the link. I select the picture names from mySql database.

How can I make this below code work with class instead of id? thank you

style code is

<style type="text/css">
#Style {
	position:absolute; 
	visibility:hidden;
	border:solid 1px #CCC;
	padding:5px;
	
}
</style>

Open in new window

my javascript code is
<script language="Javascript">
<!--
function ShowPicture(id,Source) {
if (Source=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (Source=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
//-->
</script>

Open in new window


at last the div and the link code is

<div id=Style><img src=img/myimage.jpg></div> 
<a href=# onMouseOver=ShowPicture('Style',1) onMouseOut=ShowPicture('Style',0)>$id</a>

Open in new window

Avatar of Leonidas Dosas
Leonidas Dosas
Flag of Greece image

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.Style {
	position:absolute; 
	visibility:hidden;
	border:solid 1px #CCC;
	padding:5px;
	
}
	</style>
</head>
<body>
<div id=Style><img src=img/myimage.jpg></div> 
<a href=# class="myLink" >$id</a></br>
<a href=# class="myLink" >$id</a></br>
<a href=# class="myLink" >$id</a></br>
<a href=# class="myLink" >$id</a></br>	
<script>


var linkElms=document.getElementsByClassName('myLink');
console.log(linkElms);
for(var i=0;i<linkElms.length;i++){
linkElms[i].addEventListener('mouseover',function(){
this.className+=' Style';
});
}
for(var i=0;i<linkElms.length;i++){
linkElms[i].addEventListener('mouseout',function(){
this.classList.remove('Style');
});
}
</script>
</body>
</html>

Open in new window

Avatar of BR

ASKER

Dear Leonidas Dosas
thank you very much for your comment but, how can I use my code with class attribute, instead of using it with id attribute?
my code is working...
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Or even better
CSS
<style type="text/css">
.popimage img {
	display: none;
	position: absolute;
	border: 1px solid #ccc;
	padding: 5px;
	max-width: 100px;
}
a.popimage :hover {
	cursor: pointer;
}
a.popimage:hover img {
	display: block;
}
</style>

Open in new window

HTML
<a class="popimage">Pic 1 <img src="images/foreground1.png"></a> 
<a class="popimage">Pic 2 <img src="images/foreground2.png"></a> 
<a class="popimage">Pic 3 <img src="images/foreground3.png"></a> 
<a class="popimage">Pic 4 <img src="images/foreground4.png"></a> 

Open in new window


Updated sample here
Avatar of BR

ASKER

Thank you Julian,
That is what i was looking for :)
Avatar of BR

ASKER

Dear Julian Hansen, thank you so much. This answer is perfect. You are great.
Thank you and you are most welcome.