• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 42
  • Last Modified:

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

0
BR
Asked:
BR
  • 3
  • 3
1 Solution
 
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
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now