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

LVL 1
BRMarketingAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Leonidas DosasCommented:
<!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

0
BRMarketingAuthor 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...
0
Julian HansenCommented:
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
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

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

Julian HansenCommented:
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
1
BRMarketingAuthor Commented:
Thank you Julian,
That is what i was looking for :)
0
BRMarketingAuthor Commented:
Dear Julian Hansen, thank you so much. This answer is perfect. You are great.
0
Julian HansenCommented:
Thank you and you are most welcome.
1
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.