Changer le src d'une image

Mammouth du PHP | 531 Messages

05 nov. 2007, 11:16

Bonjour,

Je galère sur une petite fonction permettant de changer l'url d'une image.
L'image id big change l'espace d'un dixième de seconde mais elle reprends dessuite son adresse d'origine img/1.jpg.

Je comprend pas ce que j'ai oublié de faire ou mal fait....

Code : Tout sélectionner

<!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" xml:lang="fr"> <head> <title>Galerie</title> <script type="text/javascript"> var big; var dest; function image(dest){ big=document.getElementById("big"); big.src=dest; } </script> </head> <body> <p><img id="big" alt="Photo1" src="img/1.jpg" /></p> <ul> <li><a href=""><img width="100" id="1" alt="Photo1" src="img/1.jpg" onclick="image(this.src);" /></a></li> <li><a href=""><img width="100" id="2" alt="Photo1" src="img/2.jpg" onclick="image(this.src);" /></a></li> <li><a href=""><img width="100" id="3" alt="Photo1" src="img/3.jpg" onclick="image(this.src);" /></a></li> </ul> </body>

d0m
Mammouth du PHP | 1141 Messages

05 nov. 2007, 11:24

Ta page n'est pas rechargée par hasard? Dans quel cas ca serait normal car l'image reprendrai alors sa source d'origine.

Sinon pour la déclaration des tes variables javascript, ça ne sert à rien de les déclarer hors de ta fonction. C'est plutôt comme cela :

Code : Tout sélectionner

<script type="text/javascript"> function image(dest){ var big=document.getElementById("big"); big.src=dest; } </script>

Mammouth du PHP | 531 Messages

05 nov. 2007, 11:38

Ta page n'est pas rechargée par hasard? Dans quel cas ca serait normal car l'image reprendrai alors sa source d'origine.

Sinon pour la déclaration des tes variables javascript, ça ne sert à rien de les déclarer hors de ta fonction. C'est plutôt comme cela :

Code : Tout sélectionner

<script type="text/javascript"> function image(dest){ var big=document.getElementById("big"); big.src=dest; } </script>
Ah oui jsuis bête, j'avais oublié de metter # comme lien :wink:

Mammouth du PHP | 531 Messages

05 nov. 2007, 11:52

Si ça peut servir à quelqun je met tout le code :

Code : Tout sélectionner

<!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" xml:lang="fr"> <head> <title>Galerie</title> <script type="text/javascript"> function image(dest,alt){ var big=document.getElementById("big"); var titre=document.getElementById("titre"); big.src=dest; big.alt=alt; document.getElementById("titre").innerHTML = alt; } </script> </head> <body> <h1 id="titre">Photo1</h1> <p><img id="big" alt="Photo1" src="img/1.jpg" /></p> <ul> <li><a href="#"><img width="100" id="1" alt="Photo1" src="img/1.jpg" onclick="image(this.src,this.alt);" /></a></li> <li><a href="#"><img width="100" id="2" alt="Photo2" src="img/2.jpg" onclick="image(this.src,this.alt);" /></a></li> <li><a href="#"><img width="100" id="3" alt="Photo3" src="img/3.jpg" onclick="image(this.src,this.alt);" /></a></li> </ul> </body>

d0m
Mammouth du PHP | 1141 Messages

05 nov. 2007, 12:20

Tu peux également enlever le lien html
<a href="#">...</a>
Même sans lien, le click sur l'image agira.

Mammouth du PHP | 531 Messages

05 nov. 2007, 13:56

Tu peux également enlever le lien html
<a href="#">...</a>
Même sans lien, le click sur l'image agira.
exact ;)

Pendant que jy suis je l'ai rendu dynamique avec un peu de php.

Code : Tout sélectionner

<!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" xml:lang="fr"> <head> <title>Galerie</title> <!-- GALLERIE --> <style type="text/css"> #galerie { overflow: hidden; display: block; width: 800px; margin: 0 auto; padding: 10px; border: 1px solid #999; } #galerie h1 { font-family: verdana; font-size: 14px; color: #999; margin: 0; } #galerie ul { margin-left: 0; margin-right: 0; padding-left: 0; list-style-type: none; } #galerie li { float: left; } #galerie a { display: block; padding: 1px; opacity: 0.5; filter:alpha(opacity=50); border: 1px solid transparent; } #galerie a:hover { opacity: 1.0; filter:alpha(opacity=100); border-color: #999; } #galerie a img { border: 0; } </style> <script type="text/javascript"> function image(dest,alt){ var big=document.getElementById("big"); var titre=document.getElementById("titre"); big.src=dest; big.alt=alt; document.getElementById("titre").innerHTML = alt; } </script> <!-- FIN GALERIE --> </head> <body> <!-- GALERIE --> <?php $rep= 'img/'; // Repertoire des images $mini= '100px'; // Taille des miniatures $grande= '650px'; // Taille grande $id_image= 0; $images= array( // Tableaux contenant l'url des images '1.jpg', '2.jpg', '3.jpg', ); $titres= array( // Tableaux contenant le titre des images 'Super image 1', 'Super image 2', 'toto', ); $nb_images= (count($images)); // ON COMPTE LE NOMBRE DE VALEUR DANS LE TABLEAU ?> <div id="galerie"> <h1 id="titre"><?php echo $titres['0']; ?></h1> <p><img id="big" width="<?php echo $grande; ?>" alt="<?php echo $titres['0']; ?>" src="<?php echo $rep.$images['0']; ?>" /></p> <ul> <?php // LISTE DES IMAGES for( $tour = 0; $tour < $nb_images; $tour++.$id_image++ ) { echo '<li><a href=""><img width="'.$mini.'" id="'.$images[$id_image].'" alt="'.$titres[$id_image].'" src="'.$rep.$images[$id_image].'" onclick="image(this.src,this.alt);" /></a></li>'; } ?> </ul> </div> <!-- FIN GALERIE --> </body>

Mammouth du PHP | 531 Messages

05 nov. 2007, 16:15

Je cherche maintenant à créer une fonction permettant de changer la taille width d'une image.

J'ai du zapper quelque chose dans ma fonction vu que ça marche pas ? Perso je ne vois pas le problème.. mais quand je passe sur l'image au lieux de s'agrandir elle disparait :

Code : Tout sélectionner

function zoom(width) { var big=document.getElementById("big"); if (big.width !== '750px') { big.width= '750px'; } else { big.width= '650px'; } }
Dans la balise img :

Code : Tout sélectionner

onmouseover="zoom(this.width)"

ViPHP
ViPHP | 4039 Messages

05 nov. 2007, 16:48

tu es sur que width s'exprime avec "px" ? j'en doute fortement.

La valeur retournée est de toute façon en px.

Code : Tout sélectionner

big.width !== '750'
devrait le faire mieuw.
Mais qu'importe. (je suis ici - dernier petit projet)
Berze going social.

Mammouth du PHP | 531 Messages

05 nov. 2007, 17:35

tu es sur que width s'exprime avec "px" ? j'en doute fortement.

La valeur retournée est de toute façon en px.

Code : Tout sélectionner

big.width !== '750'
devrait le faire mieuw.
Oui c'était l'erreur... je pensais pourtant que le width me retournerais px.

Voilà toujours pour ceux que ça interesse. C'est un peu plus dynamique maintenant puisque php lit tout seul les images dans le repertoire :wink:


<!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" xml:lang="fr">
<head>
<title>Galerie</title>

<!-- GALLERIE -->
<?php // PARAMETRES
$rep = 'img/'; // Repertoire des images
$mini = '100'; // Taille des miniatures
$grande = '650'; // Taille grande
$id_image = 0;
?>

<style type="text/css">
#galerie {
overflow: hidden;
display: block;
width: 800px;
margin: 0 auto;
padding: 10px;
border: 1px solid #999;
}
#galerie h1 {
font-family: verdana;
font-size: 14px;
color: #fff;
margin: 0;
padding: 5px;
background: #999;
}

#big {
display: block;
margin: 0 auto;
}

#mini ul {
margin-left: 0;
margin-right: 0;
padding-left: 0;
list-style-type: none;
}
#mini li {
float: left;
}
#mini a {
display: block;
padding: 1px;
margin: 1px;
opacity: 0.5;
filter:alpha(opacity=50);
border: 1px solid #999;
}
#mini a:hover {
opacity: 1.0;
filter:alpha(opacity=100);
border-color: #999;
}
#mini a img {
border: 0;
}
</style>
<script type="text/javascript">
function image(src,alt){
	var big=document.getElementById("big");
	var titre = document.getElementById("titre");
	big.src = src;
	document.getElementById("titre").innerHTML = alt; 
}
function zoom(width) {
	var big = document.getElementById("big");
	if (big.width != '750') {
		big.width = '750';
	}
	else {
		big.width = '<?php echo $grande; ?>';
	}
}
</script> 
<!-- FIN GALERIE -->

</head>
<body>

<!-- GALERIE -->
<?php
$images = array(); // Tableaux contenant l'url des images
$opendir = opendir($rep);
while ($file = readdir($opendir)) {
	$last= substr($file, -5); // Recuperation 5 derniers caractères
	if (eregi('.', $last)) { // Si la chaine contient un point (Permet d'exlure les fichiers cachés ou sans extensions)
		$images[] = $file;
	}
}

$titres= array( // Tableaux contenant le titre des images
'Super image 1',
'Super image 2',
'toto',
);

$nb_images= (count($images)); // ON COMPTE LE NOMBRE DE VALEUR DANS LE TABLEAU

?>
<div id="galerie">
<h1 id="titre"><?php echo $titres['0']; ?></h1>
<p><img id="big" width="<?php echo $grande; ?>" alt="<?php echo $titres['0']; ?>" src="<?php echo $rep.$images['0']; ?>" onmouseover="zoom(this.width)" /></p>

<div id="mini">
<ul>
<?php
// LISTE DES IMAGES
for( $tour = 0; $tour < $nb_images; $tour++.$id_image++ ) {
	echo '<li><a href="#"><img width="'.$mini.'" id="'.$images[$id_image].'" alt="'.$titres[$id_image].'" src="'.$rep.$images[$id_image].'" onclick="image(this.src,this.alt);" /></a></li>';
}
?>
</ul>
</div>

</div>
<!-- FIN GALERIE -->

</body>

ViPHP
ViPHP | 4039 Messages

05 nov. 2007, 17:37

C'est une confusion du à css, ou on a l'habitude de spécifier l'unité utilisée.
Mais qu'importe. (je suis ici - dernier petit projet)
Berze going social.

Mammouth du PHP | 531 Messages

05 nov. 2007, 17:46

Dernière question avant de clore mon topic :

je comprend pas ce qui cloche ici :

Code : Tout sélectionner

big.width = '<?php echo $grande; ?> + 50';
Pourtant j'ai la reference javascript sous les yeux, chapitre Opérateurs arithmétiques :(

ViPHP
ViPHP | 4039 Messages

05 nov. 2007, 17:50

pourquoi faire les apostrophes ?

Code : Tout sélectionner

big.width = <?php echo $grande; ?> + 50;
Pas besoin de ParseInt à mon avis..
Mais qu'importe. (je suis ici - dernier petit projet)
Berze going social.

Mammouth du PHP | 531 Messages

05 nov. 2007, 18:18

pourquoi faire les apostrophes ?

Code : Tout sélectionner

big.width = <?php echo $grande; ?> + 50;
Pas besoin de ParseInt à mon avis..
Ok autant pour moi... je crois que je fatigue parce que pour une fois je sais très bien qu'il ne faut pas d'apostrophe quand il y a nombre :lol:

Sinon ma fonction ci dessous vosu parrait juiste ? J'ai un doute :

Code : Tout sélectionner

function zoom(cible,width) { if (width != '<?php echo $grande; ?>') { document.getElementById(cible).width = '<?php echo $grande; ?>'; } else { document.getElementById(cible).width = <?php echo $grande; ?> + <?php echo $zoom; ?>; } }

Code : Tout sélectionner

<p><a href="#" onmclick="zoom(big,big.width)">Zoom</a> <img id="big" width="<?php echo $grande; ?>" alt="<?php echo $titres['0']; ?>" src="<?php echo $rep.$images['0']; ?>" /></p>

Eléphant du PHP | 445 Messages

05 nov. 2007, 18:21

Ok autant pour moi... je crois que je fatigue parce que pour une fois je sais très bien qu'il ne faut pas d'apostrophe quand il y a nombre :lol:

Sinon ma fonction ci dessous vosu parrait juiste ? J'ai un doute :

Code : Tout sélectionner

function zoom(cible,width) { if (width != '<?php echo $grande; ?>') { document.getElementById(cible).width = '<?php echo $grande; ?>'; } else { document.getElementById(cible).width = <?php echo $grande; ?> + <?php echo $zoom; ?>; } }
Alors la tu dois etre sacrement fatigué.
Enleves tout tes guillemets.

Puis tu as fait une erreur de frappe : onmclick -> onclick

Code : Tout sélectionner

zoom(big,big.width) // par zoom("big",750)

Mammouth du PHP | 531 Messages

05 nov. 2007, 18:26

Oui la j'avou que j'arrive plus a reflechir
C'est peut être l'heure de prendre l'air :lol:

Dernière erreur par le débuggeur : document.getElementById(cible) has no properties
[Break on this error] document.getElementById(cible).width = 650 + 163;

Merci j'ai viré tous les guillemets...