Avatar of BR
BR
Flag for Turkey 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

JavaScript

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
Leonidas Dosas

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

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
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Julian Hansen

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
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
BR

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

ASKER
Dear Julian Hansen, thank you so much. This answer is perfect. You are great.
Julian Hansen

Thank you and you are most welcome.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.