Forum d'entraide PHPFrance

Venez poser vos questions PHP, MySQL, HTML5, CSS, Javascript, Gestion de serveurs à la communauté PHPfrance
https://forum.phpfrance.com/

Changer le src d'une image

https://forum.phpfrance.com/viewtopic.php?f=7&t=33931

Page 1 sur 2

Changer le src d'une image

Posté : 05 nov. 2007, 11:16
par supercanard
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>

Posté : 05 nov. 2007, 11:24
par d0m
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>

Posté : 05 nov. 2007, 11:38
par supercanard
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:

Posté : 05 nov. 2007, 11:52
par supercanard
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>

Posté : 05 nov. 2007, 12:20
par d0m
Tu peux également enlever le lien html 
<a href="#">...</a>
Même sans lien, le click sur l'image agira.

Posté : 05 nov. 2007, 13:56
par supercanard
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>

Posté : 05 nov. 2007, 16:15
par supercanard
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)"

Posté : 05 nov. 2007, 16:48
par Berzemus
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.

Posté : 05 nov. 2007, 17:35
par supercanard
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>

Posté : 05 nov. 2007, 17:37
par Berzemus
C'est une confusion du à css, ou on a l'habitude de spécifier l'unité utilisée.

Posté : 05 nov. 2007, 17:46
par supercanard
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 :(

Posté : 05 nov. 2007, 17:50
par Berzemus
pourquoi faire les apostrophes ?

Code : Tout sélectionner

big.width = <?php echo $grande; ?> + 50;
Pas besoin de ParseInt à mon avis..

Posté : 05 nov. 2007, 18:18
par supercanard
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>

Posté : 05 nov. 2007, 18:21
par h0_noMan
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)

Posté : 05 nov. 2007, 18:26
par supercanard
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...
Heures au format UTC+02:00
Page 1 sur 2
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/