Sujet Précédent Sujet Suivant

Rollover Photoshop CS4 Adobe Imagery

Résolu/Fermé
lusitanio Messages postés 142 Date d'inscription samedi 9 mai 2009 Statut Membre Dernière intervention 18 novembre 2012 - 23 janv. 2010 à 02:08
bg62 Messages postés 23666 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 2 janvier 2025 - 7 févr. 2010 à 10:37
Bonjour,

j'ai un problème pour créer un rollover sur un menu créer sur photoshop.
Je suis tout fraichement employé par un bureau d'étude, et je doit aussi m'occuper de leur site internet, donc je découvre depuis maintenant une semaine le langage html et css et un peu de php et javascript.

Donc je voudrais créer une barre de menu sous photoshop (parc qu'ils trouvent sa plus "design"), et avoir un effet de rollover (changement de couleur) en css si possible pas de javascript (car bloqué par certain navigateurs). J'ai suivi quelque tuto mais ils prescrivent tous l'utilisation du logiciel adobe imagery.
donc questions lol:
-est-il fourni avec photoshop cs4(personne dans ma boîte n'est en mesure de me renseigner et ca m'éviterai de perdre du temps avec la holtline adobe?

-sinon existe-t-il un autre moyen meme en bricolant: alors j'ai réussit en partie(avec des liste et la fonction "hover" mais j'aimerais que les bords de ma barre restent inactif (comme pour le site de CCM) quand la souris passe ce que je n'ai pas réussit à faire.

voilà je crois avoir fait le tour, mais je sais si je me suis bien expliquer :-p, en tout cas merci par avance pour vos conseils/explications.
A voir également:

10 réponses

Réponse 1 / 10
bg62 Messages postés 23666 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 2 janvier 2025 2 392
23 janv. 2010 à 11:28
dans CS4 imageready y est mais placé dans l'onglet animation ..., plus comme un programme à part ...
0
Réponse 2 / 10
csi_bern
23 janv. 2010 à 11:51
Salut lusitanio,

Tu peut faire un mappage de ton image créée sur photoshop comme suit :
<img src="nom_image" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="115,83,30" />
<area shape="circle" coords="174,83,32" />
...
</map>

Comme cela tu configures des zones cliquables sur l'image (il n'y a pas que circle). L'utilisation d'un logiciel Wysiwyg te serait d'une grande aide pour placer ces zones.

Pour ce qui est du rollover, je ne vois que l'utilisation de onmouseover dans la balise area, mais ça fera appel à javascript pour modifier le style
0
Réponse 3 / 10
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
23 janv. 2010 à 15:03
A moins que la police de caractère du texte du menu soit particulièrement exotique, le principe d'un menu est une liste à puce toute bête dont on arrange l'aspect en CSS et dont le fond est une image qui change d'aspect au passage de la souris.

C'est donc bien par la pseudo-classe :hover qu'il faut passer. Il faut donc juste, dans ce cas, se créer deux petites images de fond (qui peuvent d'ailleurs être assemblées en vue d'utilisation de la technique dite des "portes coulissantes").

Voici un tuto très simple pour le principe :
http://css.mammouthland.net/menu-horizontal-en-css.php
0
lusitanio Messages postés 142 Date d'inscription samedi 9 mai 2009 Statut Membre Dernière intervention 18 novembre 2012 6
24 janv. 2010 à 01:56
Merci, pour ta réponse,

je connait cette technique,même si je préfère remplacer une image par une autre, c'est celle que j'utilise pour le moment, le pb, c'est que je ne peut pas insérer d'image sans texte en css, seulement en html, et lorsque la résolution de l'écran change (tester en affichant et désaffichant le panneau latéral favoris de firefox: se décalent, mais ne suivent pas la barre.

Car je veux une barre de menu en rollover ce que j'arrive a faire, mais avec des bords qui eux restent fixes.

Le plus simple c'est de le faire avec imagery d'adobe qui est soit-disant fourni avec photoshop, mais je vois pas ou?

j'ai télécharger la version d'évaluation mais je ne sais pas comment exporter mes images de photoshop vers adobe imagery?

si quelqun a un soluce suis preneur.
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213 > lusitanio Messages postés 142 Date d'inscription samedi 9 mai 2009 Statut Membre Dernière intervention 18 novembre 2012
24 janv. 2010 à 09:25
le pb, c'est que je ne peut pas insérer d'image sans texte en css, seulement en html,

Pourquoi ?
Tu peux peut-être nous donner le code qu'on comprenne mieux ?
0
lusitanio Messages postés 142 Date d'inscription samedi 9 mai 2009 Statut Membre Dernière intervention 18 novembre 2012 6 > notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011
24 janv. 2010 à 23:49
oui c'est vrai qu'expliqué comme ça, ça ne veux rien dire:

ce que je voulais dire c'est qu'en css pour insérer une image en background il faut (apparament) auparavant inclure du texte dans le code html.

Mais voici mon code pour que tu comprennes mieux:

code html: 

<!--barre de menu-->
	<div id="barre">
		<ul><li id="image1"></li>
			<li><a href="" id="debut"> &nbsp Accueil</a></li>
			<li><a href=""id="milieu">Domaines d'activité</a></li>
			<li><a href=""id="milieu">Qui sommes-nous?</a></li>
			<li><a href=""id="milieu">Nos Partenaires</a></li>
			<li><a href=""id="fin">Contact &nbsp</a></li>
		</ul>
		</div>

	<!--fin de barre menu-->


code css lié: 

a
{
text-decoration:none;
font-weight:bold;
color:black;
}

a:hover
{
font-style:normal;
color:white;
}

li
{
list-style:none;
}

div#barre
{
margin-left:50px;

}

#barre ul
{
margin-left:17%;
margin-top:120px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
list-style-type:none;
display:block;
}

div#barre li
{
float:left;

}

a#debut
{
display:block;
margin:auto;
background:url(Design_perso/barre-grise_02.gif);
text-align:center;
margin-top:5px;
padding-top:12px;
padding-right:1px;
padding-left:11px;
width:150px;
height:38px;
}

a#debut:hover
{
display:block;
margin:auto;
background:url(Design_perso/barre-bleue_02.gif);
text-align:center;
margin-top:5px;
padding-top:12px;
padding-right:1px;
padding-left:11px;
width:150px;
height:38px;
}

a#milieu
{
display:block;
margin:auto;
background:url(Design_perso/barre-grise_07.gif);
text-align:center;
margin-top:5px;
padding-top:12px;
padding-right:6px;
padding-left:6px;
width:132px;
height:38px;
}

a#milieu:hover
{
display:block;
margin:auto;
background:url(Design_perso/barre-bleue_07.gif);
text-align:center;
margin-top:5px;
padding-top:12px;
padding-right:6px;
padding-left:6px;
width:132px;
height:38px;
}

a#fin
{
display:block;
margin:auto;
background:url(Design_perso/barre-grise_09.gif);
margin-top:5px;
padding-top:12px;
padding-right:13px;
padding-left:0px;
width:137px;
height:38px;
}

a#fin:hover
{
display:block;
margin:auto;
background:url(Design_perso/barre-bleue_09.gif);
margin-top:5px;
padding-top:12px;
padding-right:13px;
padding-left:0px;
width:137px;
height:38px;
}

#image1
{background-image:url(imagedebut.png)}


c'est cette dernière image qui ne veut pas s'afficher, dans mon code l'id correspondant ets dans la balise <li>.

Cela dit j'ai trouvé une solution, en bricolant mon menu sous photoshop sans texte, et ainsi mes bords reste identique comme sur le site de CCM, mais reste actif (le curseur de la souris devenant une main).

Je sais pas si tout ça est trés clair lol!

En tout cas merci pour ton aide!
0
Réponse 4 / 10
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
25 janv. 2010 à 20:57
Effectivement, vu que l'item <li id="image1"></li> est vide, il a donc une aire nulle (enfin, presque).
Et sémantiquement parlant, c'est très discutable...

Cela dit, si tu lui donnes une aire non nulle à l'aide d'une largeur (width) et d'une hauteur (height) (celles de ton image en fait), tu verras ton image.

Principe (juste avec des couleurs) : 
li#image1 {
width:100px;
height:50px;
background:yellow;
}
li:hover#image1 {
background:red;
}


Petite restriction tout de même, li:hover ne fonctionne pas avec IE6.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 10
lusitanio Messages postés 142 Date d'inscription samedi 9 mai 2009 Statut Membre Dernière intervention 18 novembre 2012 6
27 janv. 2010 à 14:25
ok merci je vais essayer ton astuce.

Pour ie6 c'est pas bien grave les utilisateurs doivent être minoritaires maintenant et puis ça ne les emepeches pas de naviguer sur mon site, le roll over n'est qu'un effet visuel.

merci encore.
0
Réponse 6 / 10
bg62 Messages postés 23666 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 2 janvier 2025 2 392
27 janv. 2010 à 16:33 
Pour ie6 c'est pas bien grave les utilisateurs doivent être minoritaires maintenant

là tu te trompes, malheureusement et pourtant on en fait des choses pour essayer de le supprimer celui là, seulement 'monsieur' tout le monde est majoritaire et aCCCCaparé par bibill ...
0
Réponse 7 / 10
lusitanio Messages postés 142 Date d'inscription samedi 9 mai 2009 Statut Membre Dernière intervention 18 novembre 2012 6
27 janv. 2010 à 22:23
OUI d'accord la majorité sont sur ie mais depuis la version 6 y'a eu la 7 et la 8, et mr tout le monde laisse windows gérer les mise à jour et ie en fait partie. Et puis meme s'ils ne font pas les mises à jour un rollover qui ne fonctionne pas n'empêche en rien de surfer sur un site, les liens eux continuerons de fonctionner.

Sinon pas d'idée sur mon problème lol?
0
bg62 Messages postés 23666 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 2 janvier 2025 2 392
28 janv. 2010 à 08:14
pour tous ceux qui ont encore IE6 voire 5.5, malheureusement très nombreux, il n' y a plus de mises à jour ... donc (sans le savoir ..) ils le conserve, IE7 & 8, qui sont considérés maintenant, non pas comme des composants de windows mais comme des programmes à part peuvent eux être mis à jour, un bon webmaster se doit de le savoir ...
0
Réponse 8 / 10
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
28 janv. 2010 à 13:01
Bien entendu on peut toujours faire dire ce qu'on veut à des statistiques, mais voici néanmoins les résultats donnés par 2 sites qui ont la réputation d'être fiables.
Les % ne sont pas absolument identiques, car le panel n'est pas exactement le même, mais ils tendent vers les mêmes chiffres, à savoir IE toutes versions passant sous le seuil de 60% d'utilisateurs :
http://www.atinternet-institute.com/fr-fr/barometre-des-navigateurs/barometre-des-navigateurs-decembre-2009/index-1-1-3-186.html
https://gs.statcounter.com/#browser-ww-monthly-200912-200912-bar

Et en ce qui concerne IE6, il semblerait qu'il passe sous le seuil de 15%.
https://gs.statcounter.com/#browser_version-ww-monthly-200912-200912-bar

Après, cela dépend aussi du profil des personnes qui viennent sur le site.
J'administre des sites très différents, et en prenant les extrêmes, j'en ai un où IE est utilisé par 63% des internautes, et un autre où ils ne sont que... 20% ;)
Dans le premier, IE6 atteint les 14% et IE 5.5 0,25 %

Donc, autant il me semble nécessaire de prendre encore en compte IE6 pour de la mise en page et la navigation, autant je pense que pour des effets de design qui ne sont qu'un plus (coins arrondis, ombrages, effet rollover comme il est question ici) on peut se faire plaisir et utiliser les CSS à fond, même si elles ne sont pas implémentées dans IE (IE6 en particulier).

Lusitanio, as-tu testé le li:hover ? ça donne ce que tu veux ou pas ?
0
bg62 Messages postés 23666 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 2 janvier 2025 2 392
28 janv. 2010 à 15:02
bien vu, mais apparemment de ce côté là il semble un peu ... 'borné' .... !
0
lusitanio Messages postés 142 Date d'inscription samedi 9 mai 2009 Statut Membre Dernière intervention 18 novembre 2012 6
28 janv. 2010 à 15:18
oui Notobe j'ai tester sur ie8 et le dernier firefox 3.5 je crois, et oui sa fonctionne comme je veut.

lol 'borné' oui on peut dire ça mais c'est déjà compliqué de prendre en compte ie qui est souvent à part dans sa manière d'afficher les page web que l'on code, moi je suis relativement novice, et microsoft commence à me souler...! Alors si je doit prendre en compte en plus les anciennes versions de ie, g pas fini! surtout pour des effets visuels. Le principal c'est que les visiteurs puissent naviguer sur mon site ensuite s'il le faut je mettrai un petit * indiquant que pour profiter pleinement du site il peuvent passer au version plus récentes de ie ou même passer à firefox.
Et puis mon site sera seulement une vitrine pour un bureau d'étude, et même compte tenu des sites de la concurrence en la matière, malgré mon faible niveau en webmastering et ben j'ai suffisamment de marge!

En tout cas merci pour vos conseils, je vais essayé d'en tenir compte (meme pour ie6 je vais essayer de le trouver et voir ce que mon code donne sur ce dernier).
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213 > lusitanio Messages postés 142 Date d'inscription samedi 9 mai 2009 Statut Membre Dernière intervention 18 novembre 2012
28 janv. 2010 à 15:41
ok. Bon courage.
(et pense à mettre le sujet en résolu)
0
Réponse 9 / 10
bg62 Messages postés 23666 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 2 janvier 2025 2 392
28 janv. 2010 à 15:20
on te parle de IE6 et IE5.5 !!!!!!!!!!!!!!!!!!
0
lusitanio Messages postés 142 Date d'inscription samedi 9 mai 2009 Statut Membre Dernière intervention 18 novembre 2012 6
28 janv. 2010 à 15:30
Lol!!!... reste zen...! passe à l'eau oubli le café!

J'ai bien compris...mais comment te dire...ce sont juste des effets visuels. C'est pas grave s'ils ne s'affichent pas sur quelques navigateurs, cela n'empêchera en rien de naviguer sur mon site!

Dans la vie faut faire des choix, moi j'ai fait le miens ;-).

la pour le coup c'est toi qui est borné!! Un peu de tolérance, surtout vu ce que ça te concerne lol!
0
Réponse 10 / 10
lusitanio Messages postés 142 Date d'inscription samedi 9 mai 2009 Statut Membre Dernière intervention 18 novembre 2012 6
7 févr. 2010 à 04:32
Lol juste pour vous tenir au courant j'avais zappé ce post....

J'ai trouvé la solution:

-premièrement photoshop et imagery ont fusionné depuis apparamment cs3.
-deuxièmement pour insérer des images en css (background) sans texte suffit de mettre le code html correspondant à un espace, entre les balises correspondantes.

merci pour ceux qui ont essayé de m'aider quand aux autres vous ne faites que nous rappeler qu'on est jamais mieux servi que par nous même.
comme dirait l'autre a bon entendeur...salut! ;-)
0
bg62 Messages postés 23666 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 2 janvier 2025 2 392
7 févr. 2010 à 10:37
merci pour ce résumé des solutions données dans le post ... :)
0