Forum Wisibility

WEB => Dreamweaver => Discussion démarrée par: laranelson4 le décembre 02, 2008, 22:51:57 pm

Titre: RESOLU partie d'image survolée (non image entière)
Posté par: laranelson4 le décembre 02, 2008, 22:51:57 pm
PROBLEME : Je travaille mon site sur illustrator, j'importe ensuite mes png ou gif sur dream. Donc chaque page correspond à une grosse image où se trouvent pleins d'éléments. Mon problème était que lorsque je voulais faire des images survolées je ne pouvais en faire qu'une seule correspondant à l'ensemble de ma page, et non des zones précises de cette grande image.

SOLUTION (trouvée par moi-même - j'en ai assez bavée pour pouvoir le préciser): aller sur photoshop et trancher son image (avec outil tranche).
Puis sur dream créer un tableau sans bords ni marges, et insérer dans chaque partie les bouts d'image. Sélectionner une image puis insertion, image survolée et dans le cadre image survolée vous avez même une option "si image cliquée" qui évite de rajouter une zone sensible pour faire un lien, voilà!!!!!!!!!
Titre: Re : zone d'image survolée
Posté par: Adel le décembre 03, 2008, 11:25:43 am

Je ne connais pas de solution qui soit rapide sans passer par de l'Ajax ou du Flash, je ne sais pas qu'en penseront les autres.

Adel
Titre: Re : zone d'image survolée
Posté par: T_bo le décembre 03, 2008, 14:37:02 pm
Pas sur de comprendre ta question mais t'es tu penché sur les balise <map> et <area> (c un peu vieillot mais efficace pour avoir différente zone réactive sur une image) ?
Titre: Re : zone d'image survolée
Posté par: kola le décembre 03, 2008, 15:19:40 pm
Pour être sûr de bien t'aider, il faudrait que tu détailles un peu, qu'elle genre d'image, (qu'elle taille, ou doit-elle apparaître?)

S'il s'agit juste d'image changeante au survol, l'équivalent du ":hover" html est présent dans dreamweaver sous le nom "image survolé" dans le menu déroulant de l'icône image (ou dans insertion/objet image/image survolée)
Tu peux aussi dessiner toi même la zone réactive.
un panneau s'ouvre, il te suffit de sélectionner tes deux images (permanente et celle s'affichant au survol) dans ton dossier racine.

J'espère t'aider mais je ne suis pas sûr que ce soit ça que tu recherches...
Titre: Re : zone d'image survolée
Posté par: Deodys le décembre 03, 2008, 17:10:25 pm
Bonsoir,

Si j'ai bien compris ton problème, je peux peut-être t'aider à avancer.
Pour cela, je vais prendre un petit exemple.

Admettons qu'on ai une image sur notre page. On aurai alors cette balise :

<img src="images/notreImage.png">

On veut qu'au passage du curseur de la souris, deux autres images s'affichent sur notre page. On aimerait également que ces nouvelles images disparaissent lorsque le curseur n'est plus haut dessus de notre image. Pour cela on va utiliser les propriétés onMouseOver et onMouseOut.

On place nos deux images à afficher dans notre page de cette façon:

<img id="identifiant1" />
<img id="identifiant2" />

Je n'ai passé qu'un identifiant à mes balises img et non le chemin de mon image.

Ensuite dans notre image de base (celle qui sera survolée), j'intègre mes propriétés:

<img src="images/notreImage.png"
onmouseover="identifiant1.src='images/nomDeLaNvelleImage.png', identifiant2.src='images/nomDeLaNvelleImage.png'"
onmouseout="identifiant1.src='', identifiant2.src=''" />

Voilà, j'espère que c'est compréhensible. Je ne dis pas que c'est la solution mais ça peut te mettre sur la voie...