Skip to content

Instantly share code, notes, and snippets.

@koorosh13hm

koorosh13hm/gist:8171401

Created December 29, 2013 15:17
Show Gist options
  • Save koorosh13hm/8171401 to your computer and use it in GitHub Desktop.
Save koorosh13hm/8171401 to your computer and use it in GitHub Desktop.
Download ZIP
Help with Javascript needed.
Raw
gistfile1.html
Aghaye aziz,
Nemidoonam code zir ro chegoone benevisam ta be man in ejaze ra bedahad ta:
ba click kardan rooye linkha tasvire tage img avaz shavad.
dar vaghe nemidanam chegoone bayad 'index' e marboot be variable haye 'a' (dar halgheye for in) ra be dast avaram.
agar rahnamayii befarmayiid sepasgozar khaham bood.
~~
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Sample</title>
<link rel="stylesheet" href="css/css.css">
<script type="text/javascript">
function leftBar (){
var a = document.getElementsByClassName("linker");
var myImage = document.getElementById("pic");
var describe = document.getElementsByClassName("describe");
var imageArray = ["../pics/a0.jpg" , "../pics/a1.jpg" , "../pics/a2.jpg" , "../pics/a3.jpg" , "../pics/a4.jpg"];
var myArray = [0,1,2,3,4];
for (i in a){
a[i].onmouseover = function (){
this.setAttribute("style" , "color: red;");
};
a[i].onmouseout = function (){
this.setAttribute("style" , "color: black;");
};
a[i].onclick = function (){
alert(a[i]);
};
}
}
window.onload = function(){
leftBar();
};
</script>
<!--<script type="text/javascript" src="js/jq1102.js"></script>-->
</head>
<body>
<div class="main">
<div class="header_wrap">
<div class="header_top">
<div class="introduction">
<div class="logo"></div> <!--end of logo-->
</div> <!--end of introduction-->
</div> <!--end of header_top-->
<div class="header_middle"></div> <!--end of header_middle-->
<div class="header_down"></div> <!--end of header_down-->
</div> <!--end of header_wrap-->
<div class="container">
<div class="left_bar">
<ul class="links">
<li><a href="#" class="linker">First Pic</a></li>
<li><a href="#" class="linker">Second Pic</a></li>
<li><a href="#" class="linker">Third Pic</a></li>
<li><a href="#" class="linker">Forth Pic</a></li>
<li><a href="#" class="linker">Fifth Pic</a></li>
</ul> <!--end of links-->
</div> <!--end of left_bar-->
<div class="content">
<div class="separator"></div>
<div class="picture">
<img src="" id="pic" />
</div>
<div class="describtion">
<p class="describe">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, quia id dolor aspernatur maiores hic non quas sapiente illum reprehenderit enim commodi quibusdam molestiae vitae in sed incidunt alias quo?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, quia id dolor aspernatur maiores hic non quas sapiente illum reprehenderit enim commodi quibusdam molestiae vitae in sed incidunt alias quo?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, quia id dolor aspernatur maiores hic non quas sapiente illum reprehenderit enim commodi quibusdam molestiae vitae in sed incidunt alias quo?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, quia id dolor aspernatur maiores hic non quas sapiente illum reprehenderit enim commodi quibusdam molestiae vitae in sed incidunt alias quo?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, quia id dolor aspernatur maiores hic non quas sapiente illum reprehenderit enim commodi quibusdam molestiae vitae in sed incidunt alias quo?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, quia id dolor aspernatur maiores hic non quas sapiente illum reprehenderit enim commodi quibusdam molestiae vitae in sed incidunt alias quo?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, quia id dolor aspernatur maiores hic non quas sapiente illum reprehenderit enim commodi quibusdam molestiae vitae in sed incidunt alias quo?
</p>
</div>
</div> <!--end of content-->
</div> <!--end of container-->
<div class="useful_links">
</div> <!--end of useful_links-->
<div class="copyright">This sample is presented by RabidHIVES.</div> <!--end of copyright-->
</div> <!--end of main-->
</body> <!--end of body-->
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment