Agrandir image avec css ou javascript ou php
reg3
Messages postés
5
Statut
Membre
-
pazz -
pazz -
Bonjour,
Je voudrais integrer dans mon site un "systeme" de gestion des images:
- Creer un dossier petites images
- Creer un dossier grandes images
pour qu'en survolant ou cliquant la petite image(couverture de livre) on voit la grande image(dos du livre)
et que je n'ai par la suite que mes dossiers images a remplir.
J'ai pense a ceci, a base de CSS[url]http://radservebeer.free.fr/tuto/css.alsacreations.com/effectcss/photo_simple.htm[/url]qui a l'air vraiment simple et sympa...
Mais j'ai bien l'impression qu'il faut rentrer manuellement chaque photo.
Alors finallement me faut il passer par un JAVASCRIPT ou un PHP ou bien un CSS est il possible?
Votre avis etaye de liens ou d'exemples me serait tres utile.
Merci.
Reg3
Je voudrais integrer dans mon site un "systeme" de gestion des images:
- Creer un dossier petites images
- Creer un dossier grandes images
pour qu'en survolant ou cliquant la petite image(couverture de livre) on voit la grande image(dos du livre)
et que je n'ai par la suite que mes dossiers images a remplir.
J'ai pense a ceci, a base de CSS[url]http://radservebeer.free.fr/tuto/css.alsacreations.com/effectcss/photo_simple.htm[/url]qui a l'air vraiment simple et sympa...
Mais j'ai bien l'impression qu'il faut rentrer manuellement chaque photo.
Alors finallement me faut il passer par un JAVASCRIPT ou un PHP ou bien un CSS est il possible?
Votre avis etaye de liens ou d'exemples me serait tres utile.
Merci.
Reg3
A voir également:
- Agrandir image avec css ou javascript ou php
- Agrandir une image - Guide
- Image iso - Guide
- Raccourci agrandir fenetre - Guide
- Légender une image - Guide
- Comment agrandir l'affichage de l'écran - Guide
5 réponses
salut,
il te faut css + javascript et c'est pas super compliqué à réaliser il te suffit d'utilisé un bon vieux innerHTML
fait un dossier "petit" ou tu mettra les petite image et un dossier "grand" ou tu mettera les grande
exemple:
html
javascript
et tu met en forme avec le css.
c'est fait à la va vite mais sa devrai fonctionner, je te conseil juste de réflechir si tu peut pas trouver mieux mais bon pour un petit truc comme sa sa devrai allez nickel
PAzzz
il te faut css + javascript et c'est pas super compliqué à réaliser il te suffit d'utilisé un bon vieux innerHTML
fait un dossier "petit" ou tu mettra les petite image et un dossier "grand" ou tu mettera les grande
exemple:
html
<img src="petit/image1.jpg" onmouseover="affiche(this.src)" onmouseout="outAct()" /> <img src="petit/image2.jpg" onmouseover="affiche(this.src)" onmouseout="outAct()" /> <img src="petit/image3.jpg" onmouseover="affiche(this.src)" onmouseout="outAct()" /> <div id="ContBigimg"></div>
javascript
function affiche(big){
big = big.replace("petit","grand");
document.getElementById('ContBigimg').innerHTML="<img src='"+big+"' />
}
function outAct(){
document.getElementById('ContBigimg').innerHTML="";
}
et tu met en forme avec le css.
c'est fait à la va vite mais sa devrai fonctionner, je te conseil juste de réflechir si tu peut pas trouver mieux mais bon pour un petit truc comme sa sa devrai allez nickel
PAzzz
Bonjour,
En fait ce que je souhaiterais faire, ce serais "d'automatiser" les images sans avoir a rentrer manuellement leurs coordonnees.
On fait une recherche produit, lorsqu'il s'affiche en miniature (grace a la ref=#PRODUIT_REF;id_image=#ID) en survolant la miniature on voit une autre image...
La je coince un peu...
Reg3
En fait ce que je souhaiterais faire, ce serais "d'automatiser" les images sans avoir a rentrer manuellement leurs coordonnees.
On fait une recherche produit, lorsqu'il s'affiche en miniature (grace a la ref=#PRODUIT_REF;id_image=#ID) en survolant la miniature on voit une autre image...
La je coince un peu...
Reg3
bonne année,
oui c'est se que je te propose plus haut la seul chose a faire c'est de déplacer tes image grande dans un dossier grand et les petit dans un petit et bien evidemment de mettre tes image grande manuellement sur la page comme ceci
car la fonction va simplement changer le grand en petit du coup le lien sera <img src="petit/image1.jpg />
le problème est qu'il te faut nomé les deux image de la même manière
sinon tu peut (sous window en tou cas) selectionné toute tes image les renomé en "image" et il ba automatiquement te les nomé "image(1) .... image(2) etc...."
sinon tu peut utilisé batch :D mais bon la sa devient merdique
pazz
oui c'est se que je te propose plus haut la seul chose a faire c'est de déplacer tes image grande dans un dossier grand et les petit dans un petit et bien evidemment de mettre tes image grande manuellement sur la page comme ceci
<img src="petit/image1.jpg" onmouseover="affiche(this.src)" onmouseout="outAct()" /> <div id="ContBigimg"></div>
function affiche(big){
big = big.replace("petit","grand");
document.getElementById('ContBigimg').innerHTML="<img src='"+big+"' />
}
function outAct(){
document.getElementById('ContBigimg').innerHTML="";
}
car la fonction va simplement changer le grand en petit du coup le lien sera <img src="petit/image1.jpg />
le problème est qu'il te faut nomé les deux image de la même manière
sinon tu peut (sous window en tou cas) selectionné toute tes image les renomé en "image" et il ba automatiquement te les nomé "image(1) .... image(2) etc...."
sinon tu peut utilisé batch :D mais bon la sa devient merdique
pazz
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
oups j'ai confondu petit a grand donc...
le javascript
et lorsque la fonction sera terminé tu aura
voila
<img src="petit/image1.jpg" onmouseover="affiche(this.src)" onmouseout="outAct()" /> <div id="ContBigimg"></div>
le javascript
function affiche(big){
big = big.replace("petit","grand");
document.getElementById('ContBigimg').innerHTML="<img src='"+big+"' />
}
function outAct(){
document.getElementById('ContBigimg').innerHTML="";
}
et lorsque la fonction sera terminé tu aura
<div id="ContBigimg"> <img src="grand/image1.jpg /> </div>
voila
Mais ce que j'aimerais, si cela est possible serait de remplacer par exemple dans le html:
<img src="petit/image1.jpg" onmouseover="affiche(this.src)" onmouseout="outAct()" />
<img src="petit/image2.jpg" onmouseover="affiche(this.src)" onmouseout="outAct()" />
<img src="petit/image3.jpg" onmouseover="affiche(this.src)" onmouseout="outAct()" />
par
<img src="#PETIT" onmouseover="affiche(this.src)" onmouseout="outAct()"/>
ou #PETIT representerait mes images sans avoir a rentrer chaque image, j'ai 2000 entrees...
Ou quelque chose d'equivalent.
Merci.
Reg3