Affilier un cod java à 1 seul clq. dreamweav

Fermé
bibi - 22 oct. 2009 à 18:29
 bibi - 22 oct. 2009 à 23:38
Bonjour,
Je suis un webmaster en herbe qui tente désespérement de réaliser son site web avec dreamweaver.
Mon projet est très simple mais ma méthode tient du bricolage instinctif :
L'idée était de faire apparaitre une image qui, lorsque l'on clic dessus, disparait et fait place à une autre image. Ainsi de suite pour trente images. Pour cela j'ai créé un calque par image et donné à chaque image un "caractère"(click on "hide" le calque à l'écran et "show" le calque suivant).
Jusque là tout fonctionne.
J'aimerai maintenant créer un zoom pour certaines images dont les détails sont peu visibles comme ici. https://www.magictoolbox.com/magiczoomplus/
Le code donné est le suivant :


1.
<html>
2.
<head>
3.
<title>Magic Zoom: Default parameters</title>
4.

5.
<!-- link to magiczoom.js file -->
6.
<script src="magiczoom.js" type="text/javascript"></script>
7.
<!-- link to magiczoom.css file -->
8.
<link href="magiczoom.css" rel="stylesheet" type="text/css" media="screen"/>
9.

10.

11.
</head>
12.
<body>
13.

14.
<p>The default look of Magic Zoom™. No customizations made.</p>
15.
<!-- define Magic Zoom -->
16.
<a href="img/r1-blue-3.jpg" title="Cool bike!" class="MagicZoom"><img src="img/r1-blue-2.jpg"/></a>
17.

18.
</body>
19.
</html>

Mais lorsque je place ce code et que je teste le site, mon image et son zoom apparaissent dès l'ouverture de mon site web ne tenant plus compte du caractère caché du calque sur lequel ils sont.
J'imagine que ce problème est du à un mauvais placement du code mais après avoir pédalé sans succès pendant une journée je m'en remets à vos conseils avisés : Peut on limiter l'execution de ce petit code à un calque seul ?
Merci d'avance

3 réponses

Mimiste Messages postés 1149 Date d'inscription samedi 17 mai 2008 Statut Membre Dernière intervention 6 mars 2016 206
22 oct. 2009 à 19:19
Salut

Pourrai tu montrer comment tu utilise le script sur ta page a toi ? Sans les numero de lignes si possible ^^
0
Bonjour Mimiste merci de t'intéresser à mon cas
Voici comment j'ai placé le code dans le "boby" dans le calque.

<div id="bellile">
<div id="bel3"><img src="image2/slide12.jpg.jpg" width="1024" height="724" border="0" onclick="MM_showHideLayers('sommaire','','show');MM_showHideLayers('bel3','','hide')" /></div>
<div id="bel2"><img src="image2/slide11.jpg.jpg" width="1024" height="724" onclick="MM_showHideLayers('bel3','','show');MM_showHideLayers('bel2','','hide')" /></div>
<div id="bel1"><img src="image2/slide910.jpg.jpg" width="1024" height="724" onclick="MM_showHideLayers('bel2','','show','bel1','','hide')" /></div>
<table width="1024" height="724" border="0">
<tr>
<td width="879"><a href="image2/belli1.jpg" title="zoom" class="MagicZoom"><img src="image2/belli0.jpg" width="881" height="616"/></a> </td>
<td width="135"><div align="right"><img src="image2/bellibord.jpg" width="134" height="721" onclick="MM_showHideLayers('bellile','','hide','bel1','','show')" /></div></td>
</tr>
</table></div>



La partie "head" est juste en dessous du titre.Comme indiqué :




<!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" />
<title>Book</title>

<!-- link to magiczoom.js file -->

<script src="magiczoom.js" type="text/javascript"></script>

<!-- link to magiczoom.css file -->

<link href="magiczoom.css" rel="stylesheet" type="text/css" media="screen"/>
<style type="text/css">
<!--
#sommaire {
position:absolute;
left:50%;
top:50%;
width:1024px;
height:724px;
margin-top:-362px;
margin-left:-512px;
z-index:0;
visibility: visible;
}

Le problème est qu'avec cette configuration le code java semble indépendant du calque dans lequel j'ai essayé de le mettre (ici div id="bellile"). Ce qui a pour conséquence de m'afficher dès le lancement du site l'image belli0 et son zoom belli1 alors que mon calque bellile est éteint.
0
romi36 Messages postés 54 Date d'inscription dimanche 26 novembre 2006 Statut Membre Dernière intervention 5 février 2012 1
22 oct. 2009 à 19:28
Coucou,

dreamweaver rend un code Horrible ! Un bon éditeur de text .... notepad++ par exemple ! et beaucoup mieu ... tu apprend beaucoup plus .... Cependant il faut travaillier ! un site ne ce fais pas en 2 jours ... un cahier des charges et généralement nécessaire ....

Pour ta réponse moi perso j'utilisrerai le Javascript .....

Coté JAVA SCRIPTE :

function changeimg(monimage) {
monimage.src = (monimage.src=="image1.jpg" ) ? "image2.jpg" : "image1.jpg";
}

Coté HTML :
<img src="image1.jpg" onclick="changeimg(this)">

Voila .... j'ai pas testé ! mais sa devrai le faire =)

Au plaisir ^^
0
Mimiste Messages postés 1149 Date d'inscription samedi 17 mai 2008 Statut Membre Dernière intervention 6 mars 2016 206
22 oct. 2009 à 23:04
Bon voici un script qui fonctionne

<!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" />
<title>Book</title>

<!-- link to magiczoom.js file -->

<script src="magiczoom.js" type="text/javascript"></script>

<!-- link to magiczoom.css file -->

<link href="magiczoom.css" rel="stylesheet" type="text/css" media="screen"/>

<script language="javascript">
var nbImage = 1;
function changeImage(){
nbImage++;
document.getElementById('image_id').src = "image"+nbImage+".jpg";
document.getElementById('link_id').href = "image"+nbImage+"-big.jpg";
MagicZoom.refresh();
MagicZoom.update()
}
</script>
</head>
<body>
<a id="link_id" href="image1-big.jpg" class="MagicZoom" onclick="changeImage()"><img id="image_id" src="image1.jpg"/></a>
</body>
</html>

Alors je sais pas si t'a bien compris le principe de magiczoom, il ne fait pas un vrai zoom comme tu pourrai le penser, il lui faut absolument 2 versions de la meme image pour fonctionner, une petite et une grosse image !

il faut alors avoir image1.jpg et image1-big.jpg

quand tu clic sur l'image il ira chercher image2.jpg et image2-big.jpg et ainsi de suite....
0
Oui oui j'ai bien compris qu'il ne s'agissait pas d'un vrai zoom. Le magic zoom fonctionnait même très bien, son seul défaut était de se lancer tout le temps par dessus les autres calques.
En tout cas je te remercie, je vais essayer ce que tu m'as écrit et je te tiendrai au courant.
Merci aussi à Romi 36 de m'avoir répondu.
Ciao.
0