Aide pour image
Fermé
juju
-
27 déc. 2009 à 17:42
Archeus01 Messages postés 1567 Date d'inscription mercredi 3 octobre 2007 Statut Membre Dernière intervention 9 juin 2022 - 28 déc. 2009 à 00:23
Archeus01 Messages postés 1567 Date d'inscription mercredi 3 octobre 2007 Statut Membre Dernière intervention 9 juin 2022 - 28 déc. 2009 à 00:23
A voir également:
- Aide pour image
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Google recherche par image - Guide
- Faststone image viewer - Télécharger - Visionnage & Diaporama
- Image - Guide
15 réponses
notobe
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
213
27 déc. 2009 à 17:46
27 déc. 2009 à 17:46
Comme ça ? http://css.mammouthland.net/annexe2_cours8_2.html
Explications :
http://css.mammouthland.net/zoomer-vignettes-thumbnail-avec-css.php#tech_2
(à adapter bien sûr)
Explications :
http://css.mammouthland.net/zoomer-vignettes-thumbnail-avec-css.php#tech_2
(à adapter bien sûr)
Oui c'est bien ça, mais juste que la limage disparait une fois le curseur partit de l'image miniature. Moi je voudrais quelle reste, par contre j'ai rien compris, c'est du Chinois pour moi.
avion-f16
Messages postés
19246
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
21 avril 2024
4 497
27 déc. 2009 à 19:22
27 déc. 2009 à 19:22
Pour comprendre le tutoriel, il te faut des bases en (x)HTML et en CSS.
Si tu ne les as pas : Siteduzero.com
Si tu ne les as pas : Siteduzero.com
Merci, mais j'ai beau avoir lu un tas de tuto à ce sujet, mais je dois me faire à l'idée que le code html c'est pas mon poing fort. Donc si vous pouviez me donner le code est me dire ou le placer ou encore mieux m'indiquer comment faire cette manipulation dans Dreamweaver, je vous en serais reconnaissant.
Merci
Merci
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
avion-f16
Messages postés
19246
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
21 avril 2024
4 497
27 déc. 2009 à 20:14
27 déc. 2009 à 20:14
Le deuxième code est à mettre dans ta feuille de style (CSS).
Le premier est à mettre dans ton contenu, et à adapter.
Le premier est à mettre dans ton contenu, et à adapter.
avion-f16
Messages postés
19246
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
21 avril 2024
4 497
27 déc. 2009 à 20:29
27 déc. 2009 à 20:29
Si tu ne connais pas le (x)HTML alors tu peux laisser tomber, ou apprendre.
Le tutoriel du SdZ est l'un des plus simples
Le tutoriel du SdZ est l'un des plus simples
bin c'est un peux dommage de laisser tomber maintenant, car ne me reste plus que ce point pour crée ma page web. Donc si tu peux me montrer le code à faire, ce serais aimable de ta part.
notobe
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
213
27 déc. 2009 à 22:20
27 déc. 2009 à 22:20
Le problème est là Juju : on veut bien t'aider, mais pas faire à ta place... et là, c'est ce que tu nous demandes.
En plus, ton problème d'image, vu que ce n'est pas possible par CSS (puisqu'il faut que ton image reste suite à un clic), il faut le faire certainement en javascript.
Or, si tu as du mal en html/CSS, je suppose que le js, c'est encore pire.
Il ne faut pas essayer de brûler les étapes. L'ensemble de ton site ne repose sûrement pas sur cet effet. Donc, tant que tu n'y arrives pas, fais quelque chose de plus simple. Et puis, tu amélioreras au fur et à mesure...
Mais prends le temps d'apprendre : c'est essentiel.
En plus, ton problème d'image, vu que ce n'est pas possible par CSS (puisqu'il faut que ton image reste suite à un clic), il faut le faire certainement en javascript.
Or, si tu as du mal en html/CSS, je suppose que le js, c'est encore pire.
Il ne faut pas essayer de brûler les étapes. L'ensemble de ton site ne repose sûrement pas sur cet effet. Donc, tant que tu n'y arrives pas, fais quelque chose de plus simple. Et puis, tu amélioreras au fur et à mesure...
Mais prends le temps d'apprendre : c'est essentiel.
Malheureusement oui ma page repose sur cette effet qui est d'ailleur la seul chose qui me manque afin de terminer malgré mon peux d'expérience. Et donc ouais tu as raison j'ai fais des recherche et apparemment c'est du javascript.
Je pense être sur la bonne voix, mais y a des petits problèmes. Quand j'ouvre mon navigateur (Safari) la 2eme petite image et descendu sous la 1ere(petite). Ensuite pour la 1ere ça marche mais quand je clic sur la 2eme y ce pas rien. Et est-il possible d'afficher par défaut la première image dans le grand cadre (avant d'appuyer sur l'une d'elle y a rien dans la grande
body {
width: 780px;
margin: auto;
}
#zone-image {
height: 400px;
width: 550px;
margin-right: auto;
margin-left: auto;
}
#image-miniature {
height: 56px;
width: 154px;
margin-right: auto;
margin-left: auto;
}
-->
</style>
<script language="javascript">
function remplace(image)
{
document.getElementById("zone-image").innerHTML="<img src='iphone1.jpg'>";
}
</script>
</head>
<body>
<div id="zone-image"></div>
<div id="image-miniature">
<img src="iphone.jpg" width="77" height="56" alt="iphone" onclick="remplace('this.src');"/>
<img src="iphone2.jpg" width="77" height="56" alt="iphone2" onclick="remplace('this.src');"/>
</div>
</body>
</html>
Je pense être sur la bonne voix, mais y a des petits problèmes. Quand j'ouvre mon navigateur (Safari) la 2eme petite image et descendu sous la 1ere(petite). Ensuite pour la 1ere ça marche mais quand je clic sur la 2eme y ce pas rien. Et est-il possible d'afficher par défaut la première image dans le grand cadre (avant d'appuyer sur l'une d'elle y a rien dans la grande
body {
width: 780px;
margin: auto;
}
#zone-image {
height: 400px;
width: 550px;
margin-right: auto;
margin-left: auto;
}
#image-miniature {
height: 56px;
width: 154px;
margin-right: auto;
margin-left: auto;
}
-->
</style>
<script language="javascript">
function remplace(image)
{
document.getElementById("zone-image").innerHTML="<img src='iphone1.jpg'>";
}
</script>
</head>
<body>
<div id="zone-image"></div>
<div id="image-miniature">
<img src="iphone.jpg" width="77" height="56" alt="iphone" onclick="remplace('this.src');"/>
<img src="iphone2.jpg" width="77" height="56" alt="iphone2" onclick="remplace('this.src');"/>
</div>
</body>
</html>
Archeus01
Messages postés
1567
Date d'inscription
mercredi 3 octobre 2007
Statut
Membre
Dernière intervention
9 juin 2022
447
27 déc. 2009 à 23:47
27 déc. 2009 à 23:47
Bonjour, voici le fichier corrigé. J'ai modifié au moins le script, et j'ai remplacé le this.src par le nom des images. Tu peux tester, ça marche.
<html>
<style>
body {
width: 780px;
margin: auto;
}
#zone-image {
height: 400px;
width: 550px;
margin-right: auto;
margin-left: auto;
}
#image-miniature {
height: 56px;
width: 154px;
margin-right: auto;
margin-left: auto;
}
-->
</style>
<script language="javascript">
function remplace(image)
{
document.getElementById("zone-image").innerHTML="<img src='"+image+"'>";
}
</script>
</head>
<body>
<div id="zone-image"></div>
<div id="image-miniature">
<img src="iphone.jpg" width="77" height="56" alt="iphone" onclick="remplace('iphone.jpg');"/>
<img src="iphone2.jpg" width="77" height="56" alt="iphone2" onclick="remplace('iphone2.jpg');"/>
</div>
</body>
</html>
<html>
<style>
body {
width: 780px;
margin: auto;
}
#zone-image {
height: 400px;
width: 550px;
margin-right: auto;
margin-left: auto;
}
#image-miniature {
height: 56px;
width: 154px;
margin-right: auto;
margin-left: auto;
}
-->
</style>
<script language="javascript">
function remplace(image)
{
document.getElementById("zone-image").innerHTML="<img src='"+image+"'>";
}
</script>
</head>
<body>
<div id="zone-image"></div>
<div id="image-miniature">
<img src="iphone.jpg" width="77" height="56" alt="iphone" onclick="remplace('iphone.jpg');"/>
<img src="iphone2.jpg" width="77" height="56" alt="iphone2" onclick="remplace('iphone2.jpg');"/>
</div>
</body>
</html>
Un GRAND merci à toi Archeus01!!!
Ca marche, mais y a juste 2 truc que je voudrais changer:
Quand j'ouvre mon navigateur (Safari) la 2eme petite image et descendu sous la 1ere(petite). Pourquoi???
Et est-il possible d'afficher par défaut la première image dans le grand cadre (avant d'appuyer sur l'une d'elle y a rien dans la grande)
Ca marche, mais y a juste 2 truc que je voudrais changer:
Quand j'ouvre mon navigateur (Safari) la 2eme petite image et descendu sous la 1ere(petite). Pourquoi???
Et est-il possible d'afficher par défaut la première image dans le grand cadre (avant d'appuyer sur l'une d'elle y a rien dans la grande)
Archeus01
Messages postés
1567
Date d'inscription
mercredi 3 octobre 2007
Statut
Membre
Dernière intervention
9 juin 2022
447
28 déc. 2009 à 00:08
28 déc. 2009 à 00:08
Bonjour,
Pour afficher dans le grand cadre, modifie ce qui est dans ton div par
<div id="zone-image"><img src="iphone.jpg" /></div>
Pour le problème de l'image en dessous: J'ai pas Safari, et j'ai pas envie de l'installer... Tente un display:inline; , c'est tout ce que je peux/veux dire.
Pour afficher dans le grand cadre, modifie ce qui est dans ton div par
<div id="zone-image"><img src="iphone.jpg" /></div>
Pour le problème de l'image en dessous: J'ai pas Safari, et j'ai pas envie de l'installer... Tente un display:inline; , c'est tout ce que je peux/veux dire.
vraiment un très grand merci à toi.
j'ai juste ce dernier petit problème. (avec tous mes navigateur, Safari, Firefox, Opera)
Si quelqu'un c'est quel est le problème???
j'ai juste ce dernier petit problème. (avec tous mes navigateur, Safari, Firefox, Opera)
Si quelqu'un c'est quel est le problème???
Archeus01
Messages postés
1567
Date d'inscription
mercredi 3 octobre 2007
Statut
Membre
Dernière intervention
9 juin 2022
447
28 déc. 2009 à 00:23
28 déc. 2009 à 00:23
Bonjour, sous Firefox, j'ai regardé. Ton width de #image-miniature est trop petit. Essaye avec 500 et tu verras. N'oublie pas les choses comme le padding qui ne font pas forcément 0 par défaut....
