How to change image through click - javascript
Posted
by
Elmir Kouliev
on Stack Overflow
See other posts from Stack Overflow
or by Elmir Kouliev
Published on 2012-07-11T14:32:17Z
Indexed on
2012/07/11
15:15 UTC
Read the original article
Hit count: 443
I have a toolbar that has 5 table cells. The first cell looks clear, and the other 4 have a shade over them. I want to make it so that clicking on the table cell will also change the image so that the shade will also change in respect to the current table cell that is selected.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>X?B?RL?R V? HADIS?L?R</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="N&SAz.css" />
<link rel="shortcut icon" href="../../Images/favicon.ico" />
<script type="text/javascript">
var switchTo5x = true;
</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">
stLight.options({
publisher: "581d0c30-ee9d-4c94-9b6f-a55e8ae3f4ae"
});
</script>
<script src="../../jquery-1.7.2.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function () {
$(".fade").css("display", "none");
$(".fade").fadeIn(20);
$("a.transition").click(function (event) {
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(500, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
$(document).ready(function () {
$('.preview').hide();
$('#link_1').click(function () {
$('#latest_story_preview1').hide();
$('#latest_story_preview2').hide();
$('#latest_story_preview3').hide();
$('#latest_story_preview4').hide();
$('#latest_story_main').fadeIn(800);
});
$('#link_2').click(function () {
$('#latest_story_main').hide();
$('#latest_story_preview2').hide();
$('#latest_story_preview3').hide();
$('#latest_story_preview4').hide();
$('#latest_story_preview1').fadeIn(800);
});
$('#link_3').click(function () {
$('#latest_story_main').hide();
$('#latest_story_preview1').hide();
$('#latest_story_preview3').hide();
$('#latest_story_preview4').hide();
$('#latest_story_preview2').fadeIn(800);
});
$('#link_4').click(function () {
$('#latest_story_main').hide();
$('#latest_story_preview1').hide();
$('#latest_story_preview2').hide();
$('#latest_story_preview4').hide();
$('#latest_story_preview3').fadeIn(800);
});
$('#link_5').click(function () {
$('#latest_story_main').hide();
$('#latest_story_preview1').hide();
$('#latest_story_preview2').hide();
$('#latest_story_preview3').hide();
$('#latest_story_preview4').fadeIn(800);
});
$(".fade").css("display", "none");
$(".fade").fadeIn(1200);
$("a.transition").click(function (event) {
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(500, redirectPage);
});
});
</script>
</head>
<body id="body" style="background-color:#FFF;" onload="document">
<div style="margin:0px auto;width:1000px;" id="all_content">
<div id="top_content" style="background-color:transparent;">
<ul id="translation_list">
<li>
<a href=""> AZ </a>
</li>
<li>
<a href="#"> RUS </a>
</li>
<li>
<a href="#"> ENG </a>
</li>
</ul>
<div id="share_buttons">
<span class='st_facebook' displayText='' title="Facebook"></span>
<span class='st_twitter' displayText='' title="Twitter"></span>
<span class='st_linkedin' displayText='' title="Linkedin"></span>
<span class='st_googleplus' displayText='' title="Google +"></span>
<span class='st_email' displayText='' title="Email"></span>
</div>
<img src="../../Images/RasulGuliyev.png" width="330" height="80" id="top_logo">
<br />
<br />
<div class="fade" id="navigation">
<ul>
<font face="Verdana, Geneva, sans-serif">
<li>
<a href="../../index.html"> ANA S?HIF? </a>
</li>
<li>
<a href="../biographyAZ.html"> BIOQRAFIYA </a>
</li>
<li style="background-color:#9C1A35;">
<a href="#"> X?B?RL?R V? HADIS?L?R </a>
</li>
<li>
<a> PROQRAM </a>
</li>
<li>
<a> SEÇICIL?R </a>
</li>
<li>
<a> ?LAQ?L?R</a>
</li>
</font>
</ul>
</div>
<font face="Tahoma, Geneva, sans-serif">
<br />
<div id="navigation2">
<ul>
<a> <li><i> HADIS?L?R </i></li> </a>
<a> <li><i>VIDEOLAR</i> </li> </a>
</ul>
</div>
<div id="news_section" style="background-color:#FFF;">
<h3 style="font-weight:100; font-size:22px; font-style:normal; color:#7C7C7C;">Son X?b?rl?r</h3>
<div class="fade" id="Latest-Stories">
<table id="stories-preview" width="330" height="598" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td>
<a id="link_1" href="#"><img src="../../Images/N&EImages/images/Article-Nav-Bar1_01.gif" width="330" height="114" alt=""></a>
</td>
</tr>
<tr>
<td>
<a id="link_2" href="#"> <img src="../../Images/N&EImages/images/Article-Nav-Bar1_02.gif" width="330" height="109" alt=""> </a>
</td>
</tr>
<tr>
<td>
<a id="link_3" href="#"> <img src="../../Images/N&EImages/images/Article-Nav-Bar1_03.gif" width="330" height="132" alt=""></a>
</td>
</tr>
<tr>
<td>
<a id="link_4" href="#"><img src="../../Images/N&EImages/images/Article-Nav-Bar1_04.gif" width="330" height="124" alt=""></a>
</td>
</tr>
<tr>
<td>
<a id="link_5" href="#"><img src="../../Images/N&EImages/images/Article-Nav-Bar1_05.gif" width="330" height="119" alt=""></a>
</td>
</tr>
</table>
<div class="fade" id="latest_story_main">
<!--START-->
<img src="../../Images/N&EImages/GuliyevFace.jpeg" style="padding:4px; margin-top:6px; border-style:groove; border-width:thin; margin-left:90px;"
/>
<a href="#"> <h2 style="font-weight:100; font-style:normal;"> "Bizim V?zif?miz Az?rbaycan Xalqinin T?zyiq? M?ruz Qalmamasini T?min Etm?kdir" </h2> </a>
<h5 style="font-weight:100; font-size:12px; color:#888; opacity:.9;">
<img src="../../Images/ClockImage.png" />IYUN 19, 2012 BY RASUL GULIYEV - R?SUL QULIYEV</h5>
<p style="font-size:14px; font-style:normal;">ACP-nin v? Müqavim?t H?r?katinin lideri, eks-spiker R?sul Quliyev "Yeni
Müsavat"a müsahib? verib. O, son vaxtlar ACP-d? bas ver?n kadr d?yisiklikl?ri,
bar?sind? dolasan söz-söhb?tl?r v? dig?r m?s?l?l?r? aydinliq g?tirib. Müsahib?ni
t?qdim edirik. – Az?rbaycanda siyasi günd?mi ?hat? ed?n m?s?l?l?rd?n biri
d? Sülh?ddin ?kb?rin ACP-y? s?dr g?tirilm?sidir. Ideya v? t?s?bbüs kimin
idi? – ?vv?ll?r d? qeyd
<a href="#"> [...]</a>
</p>
<!--FIRST STORY END -->
</div>
<div class="preview" id="latest_story_preview1">
<!--START-->
<img src="../../Images/N&EImages/GuliyevFace2.jpeg" style="padding:4px; margin-top:6px; border-style:groove; border-width:thin; margin-left:90px;"
/>
<a href="#"> <h2 style="font-weight:100; font-style:normal;"> "S?xsiyy?ti Alçaldilan Insanlarin Qisasi Amansiz Olur" </h2></a>
<h5 style="font-weight:100; font-size:12px; color:#888; opacity:.9;">
<img src="../../Images/ClockImage.png" />IYUN 12, 2012 BY RASUL GULIYEV - R?SUL QULIYEV</h5>
<p style="font-size:14px; font-style:normal;">R?sul Quliyev: "Az?rbaycanda müxalif?tin görün?n f?aliyy?ti ?halinin hökum?td?n
naraziliq potensialini ifad? etmir" Eks-spiker Avropa görüsl?rinin yekunlarini
s?rh etdi ACP lideri R?sul Quliyevin Avropa görüsl?ri basa çatib. S?f?rin
yekunlari bar?d? R?sul Quliyev eksklüziv olaraq "Yeni Müsavat"a açiqlama
verib. Norveçd? keçiril?n görüsl?rd? Açiq C?miyy?t v? Liberal Demokrat
partiyalarinin s?drl?ri Sülh?ddin ?kb?r, Fuad ?liyev v? Müqavim?t H?r?kati
Avropa
<a href="#"> [...]</a>
</p>
<!--SECOND STORY END -->
</div>
<div class="preview" id="latest_story_preview2">
<!--START-->
<img src="../../Images/N&EImages/GuliyevFace3.jpeg" style="padding:4px; margin-top:6px; border-style:groove; border-width:thin; margin-left:90px;"
/>
<a href="#"> <h2 style="font-weight:100; font-style:normal;"> R?sul Quliyevin Iyunun 4, 2012-ci ild? Bryusseld?ki Görüsl?rl? ?laq?dar Çixisi </h2></a>
<h5 style="font-weight:100; font-size:12px; color:#888; opacity:.9;">
<img src="../../Images/ClockImage.png" />IYUN 4, 2012 BY RASUL GULIYEV - R?SUL QULIYEV</h5>
<p style="font-size:14px; font-style:normal;">Brüssel görüsl?ri – Az?rbaycanda xalqin malini ogurlayan korrupsioner
Höküm?t liderl?rinin xarici banklarda olan qara pullari v? ?mlaklarinin
dondurulmasina çox qalmayib. Camaatin hüquqlarini pozan polis, prokuratura
v? m?hk?m? isçil?rin? v? onlarin r?hb?rl?rin? viza m?hdudiyy?tl?ri qoymaqda
reallasacaq. R?sul Quliyevin Iyunun 4, 2012-ci ild? Bryusseld?ki Görüsl?rl?
?laq?dar Çixisi Rasul Guliyev's Speech on June 4, 2012 about Brussels Meetings
<a
href="#">[...]</a>
</p>
<!--THIRD STORY END -->
</div>
<div class="preview" id="latest_story_preview3">
<!--START-->
<img src="../../Images/N&EImages/GuliyevGroup1.jpeg" style="padding:4px; margin-top:6px; border-style:groove; border-width:thin; margin-left:90px;"
/>
<a href="#"> <h2 style="font-weight:100; font-style:normal;"> R?sul Quliyevin Avropa Parlamentind? v? Hakimiyy?t Qurumlarinda Görüsl?ri Baslamisdir </h2></a>
<h5 style="font-weight:100; font-size:12px; color:#888; opacity:.9;">
<img src="../../Images/ClockImage.png" />MAY 31, 2012 BY RASUL GULIYEV - R?SUL QULIYEV</h5>
<p style="font-size:14px; font-style:normal;">Aciq C?miyy?t Partiyasinin lideri, eks-spiker R?sul Quliyev Avropa Parlamentind?
görüsl?rini davam etdirir. Bu haqda "Yeni Müsavat"a R.Quliyev özü m?lumat
verib. O bildirib ki, görüsl?rd? Liberal Demokrat Partiyasinin s?dri Fuad
?liyev v? R.Quliyevin Skandinaviya ölk?l?ri üzr? müsaviri Rauf K?rimov
da istirak edirl?r. Eks-spiker deyib ki, bu görüsl?r 2013-cü ild? keçiril?c?k
prezident seçkil?rind? saxtalasdirmanin qarsisini almaq planinin [...]</p>
<!--FOURTH
STORY END -->
</div>
<div class="preview" id="latest_story_preview4">
<!--START-->
<img src="../../Images/N&EImages/GuliyevGroup2.jpeg" style="padding:4px; margin-top:6px; border-style:groove; border-width:thin; margin-left:90px;"
/>
<a href="#"> <h2 style="font-weight:100; font-style:normal;"> Norveçin Oslo S?h?rind? Parlament Üzvl?ri il? v? Xarici Isl?r Nazirliyind? Görüsl?r </h2></a>
<h5 style="font-weight:100; font-size:12px; color:#888; opacity:.9;">
<img src="../../Images/ClockImage.png" />MAY 30, 2012 BY RASUL GULIYEV - R?SUL QULIYEV</h5>
<p style="font-size:14px; font-style:normal;">R?sul Quliyev Norveçin Oslo s?h?rind? Parlament üzvl?ri v? Xarici isl?r
nazirliyind? görüsl?r keçirmisdir. Bu görüsl?rd? Az?rbaycandan Liberal
Demokrat Partiyasinin s?dri Fuad ?liyev, Avro-Atlantik Surasinin s?dri
Sülh?ddin ?kb?r v? Milli Müqavim?t H?r?katinin Skandinaviya ölk?l?ri üzr?
nümay?nd?si Rauf K?rimov istirak etmisdir. Siyasil?r ilk ?vv?l mayin 22-d?
Norveç Parlamentinin Avropa Surasinda t?msil ed?n nümay?nd? hey?tinin üzvül?ri
Karin S. [...]</a>
</p>
<!--FIFTH STORY END -->
</div>
<hr />
</div>
<!--LATEST STORIES -->
<div class="fade" id="article-section">
<h3 style="font-weight:100; font-size:22px; font-style:normal; color:#7C7C7C;">Çecin X?b?rl?r</h3>
<div class="older-article">
<img src="../../Images/N&EImages/GuliyevGroup2.jpeg" style="padding:4px; margin-top:6px; border-style:groove; border-width:thin; margin-left:90px;"
/>
<a href="#"> <h2 style="font-weight:100; font-style:normal;"> Norveçin Oslo S?h?rind? Parlament Üzvl?ri il? v? Xarici Isl?r Nazirliyind? Görüsl?r </h2></a>
<h5 style="font-weight:100; font-size:12px; color:#888; opacity:.9;">
<img src="../../Images/ClockImage.png" />MAY 30, 2012 BY RASUL GULIYEV - R?SUL QULIYEV</h5>
<p style="font-size:14px; font-style:normal;">R?sul Quliyev Norveçin Oslo s?h?rind? Parlament üzvl?ri v? Xarici isl?r
nazirliyind? görüsl?r keçirmisdir. Bu görüsl?rd? Az?rbaycandan Liberal
Demokrat Partiyasinin s?dri Fuad ?liyev, Avro-Atlantik Surasinin s?dri
Sülh?ddin ?kb?r v? Milli Müqavim?t H?r?katinin Skandinaviya ölk?l?ri üzr?
nümay?nd?si Rauf K?rimov istirak etmisdir. Siyasil?r ilk ?vv?l mayin 22-d?
Norveç Parlamentinin Avropa Surasinda t?msil ed?n nümay?nd? hey?tinin üzvül?ri
Karin S. [...]</a>
</p>
</div>
<hr />
</div>
<!--NEWS SECTION-->
</font>
<h3 class="fade" id="footer">Rasul Guliyev 2012</h3>
</div>
</body>
</head>
</html>
© Stack Overflow or respective owner
