bonsoir tout le monde,
J'ai besoin de votre aide : j'ai écrit un programme en javascript pour faire un avec des images miniatures qui affichent une image de taille normale, le soucis est que j'ai mis un script lorsque l'on clique sur l'image miniature une bordure entoure celle-ci.
Ce que je n'arrive pas à faire c'est faire disparaître cette bordure lorsque je clique sur l'image suivante.
Merci d'avance
voilà mon script :
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="fr" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
div#galerie
{
width:400px ;
border: 0px solid #dcb ;
padding: 35px 7px ;
margin: 100px 500px ;
text-align: center ;
}
ul#galerie_mini
{
margin: 0 ;
padding: 0 ;
list-style-type: none ;
position : fixed;
}
ul#galerie_mini li
{
float: left ;
}
ul#galerie_mini li a img
{
margin: 2px 1px ;
border: 1px solid #dcb ;
padding: 1px ;
}
dl#photo
{
clear: both ;
margin: 0 auto ;
}
dl#photo dd
{
margin: 0 ;
}
dl#photo img
{
border: 0 px solid #dcb ;
}
</style>
</head>
<body>
<script type="text/javascript">
function displayPics()
{
var photos = document.getElementById('galerie_mini') ;
// On récupère l'élément ayant pour id galerie_mini
var liens = photos.getElementsByTagName('a') ;
// On récupère dans une variable tous les liens contenu dans galerie_mini
var big_photo = document.getElementById('big_pict') ;
// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
for (var i = 0 ; i < liens.length ; ++i) {
// Au clique sur ces liens
liens.onclick = function() {
big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
return false; // Et pour finir on inhibe l'action réelle du lien
};
}
}
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
window.onload = displayPics;
function toggleBorder(img) {
if(!img.style.border||img.style.borderLeftStyle=='none') {
img.style.border = "1px solid red" ;
}
else {
img.style.border = "none" ;
}
}
</script>
<div id="galerie">
<dl id="photo">
<dd align=center><img id="big_pict" src="tn1.jpg" alt="Photo 1 en taille normale" align='center' /></dd>
</dl>
<ul id="galerie_mini">
<li>
<a href="tn1.jpg" title="Titre de la photo 1" ><img src="ts1.jpg" alt="Le titre de la photo 1" onclick="toggleBorder(this);" /></a> </li>
<li>
<a href="tn2.jpg" title="Titre de la photo 2"><img src="ts2.jpg" alt="Le titre de la photo 2" onclick="toggleBorder(this);" /></a> </li>
<li>
<a href="tn3.jpg" title="Titre de la photo 3"><img src="ts3.jpg" alt="Le titre de la photo 3" onclick="toggleBorder(this);" /></a> </li>
<li>
<a href="tn4.jpg" title="Titre de la photo 4"><img src="ts4.jpg" alt="Le titre de la photo 4" onclick="toggleBorder(this);" /></a> </li>
<li>
<a href="tn5.jpg" title="Titre de la photo 5"><img src="ts5.jpg" alt="Le titre de la photo 5" onclick="toggleBorder(this);" /></a> </li>
<li>
<a href="tn6.jpg" title="Titre de la photo 6"><img src="ts6.jpg" alt="Le titre de la photo 6" onclick="toggleBorder(this);" /></a> </li>
<li>
<a href="tn7.jpg" title="Titre de la photo 7"><img src="ts7.jpg" alt="Le titre de la photo 7" onclick="toggleBorder(this);" /></a> </li>
<li>
<a href="tn8.jpg" title="Titre de la photo 8"><img src="ts8.jpg" alt="Le titre de la photo 8" onclick="toggleBorder(this);" /></a> </li>
<li>
<a href="tn9.jpg" title="Titre de la photo 9"><img src="ts9.jpg" alt="Le titre de la photo 9" onclick="toggleBorder(this);" /></a> </li>
</ul>
</div>
<body>
</html>
merci d'avance
J'ai besoin de votre aide : j'ai écrit un programme en javascript pour faire un avec des images miniatures qui affichent une image de taille normale, le soucis est que j'ai mis un script lorsque l'on clique sur l'image miniature une bordure entoure celle-ci.
Ce que je n'arrive pas à faire c'est faire disparaître cette bordure lorsque je clique sur l'image suivante.
Merci d'avance
voilà mon script :
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="fr" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
div#galerie
{
width:400px ;
border: 0px solid #dcb ;
padding: 35px 7px ;
margin: 100px 500px ;
text-align: center ;
}
ul#galerie_mini
{
margin: 0 ;
padding: 0 ;
list-style-type: none ;
position : fixed;
}
ul#galerie_mini li
{
float: left ;
}
ul#galerie_mini li a img
{
margin: 2px 1px ;
border: 1px solid #dcb ;
padding: 1px ;
}
dl#photo
{
clear: both ;
margin: 0 auto ;
}
dl#photo dd
{
margin: 0 ;
}
dl#photo img
{
border: 0 px solid #dcb ;
}
</style>
</head>
<body>
<script type="text/javascript">
function displayPics()
{
var photos = document.getElementById('galerie_mini') ;
// On récupère l'élément ayant pour id galerie_mini
var liens = photos.getElementsByTagName('a') ;
// On récupère dans une variable tous les liens contenu dans galerie_mini
var big_photo = document.getElementById('big_pict') ;
// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
for (var i = 0 ; i < liens.length ; ++i) {
// Au clique sur ces liens
liens.onclick = function() {
big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
return false; // Et pour finir on inhibe l'action réelle du lien
};
}
}
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
window.onload = displayPics;
function toggleBorder(img) {
if(!img.style.border||img.style.borderLeftStyle=='none') {
img.style.border = "1px solid red" ;
}
else {
img.style.border = "none" ;
}
}
</script>
<div id="galerie">
<dl id="photo">
<dd align=center><img id="big_pict" src="tn1.jpg" alt="Photo 1 en taille normale" align='center' /></dd>
</dl>
<ul id="galerie_mini">
<li>
<a href="tn1.jpg" title="Titre de la photo 1" ><img src="ts1.jpg" alt="Le titre de la photo 1" onclick="toggleBorder(this);" /></a> </li>
<li>
<a href="tn2.jpg" title="Titre de la photo 2"><img src="ts2.jpg" alt="Le titre de la photo 2" onclick="toggleBorder(this);" /></a> </li>
<li>
<a href="tn3.jpg" title="Titre de la photo 3"><img src="ts3.jpg" alt="Le titre de la photo 3" onclick="toggleBorder(this);" /></a> </li>
<li>
<a href="tn4.jpg" title="Titre de la photo 4"><img src="ts4.jpg" alt="Le titre de la photo 4" onclick="toggleBorder(this);" /></a> </li>
<li>
<a href="tn5.jpg" title="Titre de la photo 5"><img src="ts5.jpg" alt="Le titre de la photo 5" onclick="toggleBorder(this);" /></a> </li>
<li>
<a href="tn6.jpg" title="Titre de la photo 6"><img src="ts6.jpg" alt="Le titre de la photo 6" onclick="toggleBorder(this);" /></a> </li>
<li>
<a href="tn7.jpg" title="Titre de la photo 7"><img src="ts7.jpg" alt="Le titre de la photo 7" onclick="toggleBorder(this);" /></a> </li>
<li>
<a href="tn8.jpg" title="Titre de la photo 8"><img src="ts8.jpg" alt="Le titre de la photo 8" onclick="toggleBorder(this);" /></a> </li>
<li>
<a href="tn9.jpg" title="Titre de la photo 9"><img src="ts9.jpg" alt="Le titre de la photo 9" onclick="toggleBorder(this);" /></a> </li>
</ul>
</div>
<body>
</html>
merci d'avance