Discussion :

[Carpariath]

Bonjour,
Voici mon problème :
je possède des images insérées dans des div, qui sont redimensionnées pour occuper TOUT le div. Pour se faire, il m'est impossible d'utiliser la propriete background des div, mais d'utiliser des balises img que je retravaille avec css pour qu'elles s'étirent.
Tout marche très bien, mais j'ai un souci : je ne peux pas utiliser la propriété hover sur ces images! En effet, j'aimerais que l'image change au passage de la souris (facile avec background et div, mais avec img???)
Peut-on modifier la propriété "src" html avec css?
Merci d'avance!

[4R416N33]

Non tu ne peux pas modifier la propriété src avec css mais avec du js.

Renseigne toi sur le DHTML pour plus d'infos à ce sujet là, étant donné qu'en l'absence de code, on t'aidera pas beaucoup.

(je crois me souvenir que le src en js pose quelques problèmes sous ie, mais je ne m'étais pas trop posé la question étant donné que j'avais redimensionné mes images pour les passer en background quand j'avais eu ce pb).

Cordialement.

[Carpariath]

Oui c'est vrai il y a le js, mais je préfère éviter cette solution
Sinon oui au depart j'avais redimensionne, mais les dimensions des images devant s'adapter a la resolution de l'ecran, je commençais à me coltiner 5 ou 6 dimensions differentes pour une meme image, avec detection de la resolution et tout le tralala... en courant le risque de tomber sur une resolution batarde coté client!
D'où mon choix d'utiliser des images "fitables" , au depart plutot grandes que petites, mais bon...
Merci quand meme pour ta réponse, je continue de chercher une solution alternative!

[Bovino]

Oui c'est vrai il y a le js, mais je préfère éviter cette solution

Pourquoi ? D'autant que c'est la seule solution pour changer le src de ton image...

[Carpariath]

Pour te répondre, Bovino,
Ca peut paraître un peu bête, mais j'aimerais éviter le plus de problèmes de compatibilité avec les navigateurs des clients...
Bien sur je pourrais intégrer du flash, du js, java ou autre, mais... et si je tombais sur LE gars qui a désactivé pour une quelconque raison le js sur son navigateur?
Et bien il faudra bien que je cherche une solution alternative pour afficher tout de même quelque chose... Bref : beaucoup de soucis pour pas forcément grand chose!

Mais bon d'un cote c'est vrai que si j'en abuse pas trop, pourquoi pas? Si c'est facile à faire, je peux toujours essayer... Je vais chercher de ce côté là!

Tant qu'on y est, admettons que je parvienne à afficher mon image alternative au passage du curseur... Il s'agirait d'un gif animé faisant office de lien : connaissez-vous un moyen pour faire en sorte que seule la partie non transparente (pas la couleur alpha, quoi) soit cliquable, et ce sur chacune des frames bien entendu...

[popo]

Tant qu'on y est, admettons que je parvienne à afficher mon image alternative au passage du curseur... Il s'agirait d'un gif animé faisant office de lien : connaissez-vous un moyen pour faire en sorte que seule la partie non transparente (pas la couleur alpha, quoi) soit cliquable, et ce sur chacune des frames bien entendu...

Peut-être une image mapée...

[Sub0]

Salut!

Pour ton problème de hover :

Avec 2 images superposées, utilise le hover pour afficher une image et en même temps cacher l'autre :
Par exemple avec display:none et display:block...

[Sub0]

Sinon, une autre solution, mais avec Javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<a href="#" 
  onMouseover="document.images.ima.src='1.jpg'"
  onMouseout="document.images..ima.src='2.jpg'"><img 
  name="ima" src="1.jpg" /></a>

[_ash_]

ben oui mais

Oui c'est vrai il y a le js, mais je préfère éviter cette solution

En revanche l'idée des images superposée est assez sioux !

[Carpariath]

Bien essayé la solution des images superposées, mais ça ne marche pas : en effet, au passage du curseur l'image disparait. Seulement, la disparition a pour effet que le curseur n'est plus interprété comme étant "sur l'image" : le hover ne fonctionne plus et l'image reapparait aussitot, puis redisparait...
On obtient un clignotement intempestif!
Merci en tous cas pour vos propositions!

[Carpariath]

Ca y est!
Je confirme qu'il est bien possible de faire un rollover en css, avec des images étirables dans un block (sans passer par la propriété background-image, quoi).

La technique reprend le principe énoncé par sub zero, mais non pas en utilisant la propriete "display" (effet de clignotement) : Le mot clé magique était "visibility"!

Admettons que nous voulons effectuer notre rollover dans le bloc "rollover" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
div#rollover { ... }
#rollover img { width : 100%; height : 100%; }
#rollover:hover img { visibility: hidden }

Il nous suffira ensuite de placer juste en dessous un div de la meme taille contenant l'image alternative à afficher au passage du curseur.

Merci à tous pour votre participation!

[Carpariath]

Coucou c'est encore moi ; encore un problème plus ou moins lié à cette succession d'images que je voulais obtenir plus haut.
J'ai à présent le souci suivant :
Mon image alternative se trouve être un gif animé qui ne tourne pas en boucle.
J'aimerais bien qu'il se relise "du début" au passage du curseur!
En effet, les navigateurs (tous?) chargent le gif en cache, et ne le lisent qu'une fois. Ainsi, au passage du curseur de la souris, seule la dernière image du gif animé s'affiche.
J'aimerais bien savoir comment, toujours sans JS si possible (cf plus haut), s'il y avait un moyen de procéder à cette relecture du gif!

[Carpariath]

En fait je vais plutot creer un nouveau topic puisque ma derniere question n'a que peu de rapport avec le sujet principal, merci encore!