Tutoriels vidéo art graphique gratuits

 
Bienvenue, Invité. Merci de vous connecter ou de vous inscrire.
Pages: [1]   En bas

Auteur Sujet: RESOLU partie d'image survolée (non image entière)  (Lu 6226 fois)

laranelson4

  • Wisi tout neuf
  • *
  • Hors ligne Hors ligne
  • Messages: 1
    • Voir le profil
    • E-mail
RESOLU partie d'image survolée (non image entière)
« 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à!!!!!!!!!
« Modifié: décembre 07, 2008, 18:16:56 pm par laranelson4 »
IP archivée

Adel

  • Wisi J'habite sur le forum
  • ****
  • Hors ligne Hors ligne
  • Messages: 403
    • Live Messenger (MSN) - adelkamel@hotmail.fr
    • Voir le profil
    • Adel Kamel - Porte Folio
    • E-mail
Re : zone d'image survolée
« Réponse #1 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
IP archivée

T_bo

  • Wisi J'habite sur le forum
  • ****
  • Hors ligne Hors ligne
  • Messages: 349
    • Voir le profil
Re : zone d'image survolée
« Réponse #2 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) ?
IP archivée

kola

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 211
    • Voir le profil
    • dorettinicolas.fr
    • E-mail
Re : zone d'image survolée
« Réponse #3 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...

Deodys

  • Wisi Pilier de comptoir
  • **
  • Hors ligne Hors ligne
  • Messages: 53
    • Voir le profil
    • z-brice portfolio
Re : zone d'image survolée
« Réponse #4 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...

IP archivée
<- Un portfolio tout neuf à venir voir d'urgence ;-)
 



Wisibility est un sité dédié à la formation aux métiers l’image. Vous y trouverez différentes ressources vous aidant à maîtriser les logiciels graphiques tels que Photoshop, Lightroom, Illustrator, InDesign, Flash… Aujourd’hui, Wisibility réunie plus d'une vingtaine d’experts, intervenant en Entreprise pour former graphistes, webdesigners, développeurs web, photographes, monteurs, trucistes…
Depuis 2006 nous nous sommes spécialisés dans les tutoriels vidéos permettant de se former à distance. Notre forum très actif, géré par une équipe de bénévoles répondra à vos demandes. Vous pourrez également profiter de nos émissions et reportages sur la Wisi TV.
Contact - Wisibility est une marque déposée

Blog - Tutoriels - Wisi TV - Forum