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

BR
BR used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Distinguished Expert 2017

Commented:
<!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

BRDigital Marketing

Author

Commented:
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...
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
You can do this with just CSS
CSS
<style type="text/css">
.popimage {
	display: none;
	position: absolute;
	border: 1px solid #ccc;
	padding: 5px;
}
a:hover {
	cursor: pointer;
}
.popimage img {
	max-width: 100px;
}
a:hover + .popimage {
	display: block;
}
</style>

Open in new window

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

Open in new window

Working sample here
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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
BRDigital Marketing

Author

Commented:
Thank you Julian,
That is what i was looking for :)
BRDigital Marketing

Author

Commented:
Dear Julian Hansen, thank you so much. This answer is perfect. You are great.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Thank you and you are most welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial