Programmation » CSS & IE 6 : positionner une image sur une autre
CSS & IE 6 : positionner une image sur une autre
Publié le 30/06/2009 @ 17:00:19,
Par antpJ'ai voulu rajouter un truc sur imcdb, après coup je me rends compte que ça déconne dans IE 6 (dans le 7 ça marche comment ?)
http://www.imcdb.org/vehicle.php?id=235976
J'affiche un rectangle sur l'image encadrant la voiture (la 205) quand le curseur passe sur l'image.
Dans Firefox/IE8/Opera il s'affiche au bon endroit.
Dans IE 6, il y a au-dessus de l'image la place qu'occuperait le rectangle s'il n'y avait pas le CSS pour le repositionner, du coup il est placé trop haut.
Le code à ce look-là :
Le left & top est calculé d'après la taille du cadre et la position de la voiture sur l'image, ce ne sont pas des valeurs prises au pif, c'est le coin supérieur gauche où doit venir se placer le cadre.
Une idée de comment faire ça autrement pour que ça marche dans IE 6 ? (et peut-être le 7 si ce n'est pas encore le cas)
Dernière édition: 30/06/2009 @ 17:01:29
http://www.imcdb.org/vehicle.php?id=235976
J'affiche un rectangle sur l'image encadrant la voiture (la 205) quand le curseur passe sur l'image.
Dans Firefox/IE8/Opera il s'affiche au bon endroit.
Dans IE 6, il y a au-dessus de l'image la place qu'occuperait le rectangle s'il n'y avait pas le CSS pour le repositionner, du coup il est placé trop haut.
Le code à ce look-là :
- <div>
- <div id="VehicleLocationFrame" style="visibility: hidden; height: 0; position: relative; left: -29px; top: 256px;">
- <img src="res/frame.png" alt="" />
- </div>
- <img src="images/235/976.jpg" alt="Peugeot 205" class="VehiclePicture" id="MainPicture" onmouseover="ShowFrame(true);" onmouseout="ShowFrame(false);" />
- </div>
Le left & top est calculé d'après la taille du cadre et la position de la voiture sur l'image, ce ne sont pas des valeurs prises au pif, c'est le coin supérieur gauche où doit venir se placer le cadre.
Une idée de comment faire ça autrement pour que ça marche dans IE 6 ? (et peut-être le 7 si ce n'est pas encore le cas)
Dernière édition: 30/06/2009 @ 17:01:29
mes programmes ·· les voitures dans les films ·· champion des excuses bidons
CSS & IE 6 : positionner une image sur une autre
Publié le 01/07/2009 @ 11:32:29,
Par antpBon vu la quantité de réponses à ma question, j'en profite pour en poser une autre :
quelle lib JS vous utiliseriez pour sélectionner une zone d'une image ? Pour repérer les coordonnées du rectangle dessiné. Pas besoin de plus, donc un truc pas trop lourd et surtout qui marche dans IE 6 ...
Pour le moment je ne prend que les coordonnées d'un clic mais ça ne marche que dans FF/IE 8 (même pas Opera 9), tant qu'à faire je me dis autant chercher un truc un peu plus évolué et tout fait plutôt que de tenter de faire du JS moi-même qui ne marche pas
Dernière édition: 01/07/2009 @ 11:32:54
quelle lib JS vous utiliseriez pour sélectionner une zone d'une image ? Pour repérer les coordonnées du rectangle dessiné. Pas besoin de plus, donc un truc pas trop lourd et surtout qui marche dans IE 6 ...
Pour le moment je ne prend que les coordonnées d'un clic mais ça ne marche que dans FF/IE 8 (même pas Opera 9), tant qu'à faire je me dis autant chercher un truc un peu plus évolué et tout fait plutôt que de tenter de faire du JS moi-même qui ne marche pas
Dernière édition: 01/07/2009 @ 11:32:54
mes programmes ·· les voitures dans les films ·· champion des excuses bidons
CSS & IE 6 : positionner une image sur une autre
Publié le 01/07/2009 @ 11:35:50,
Par Jean-Christophetu ne sais pas récupérer le script utilisé dans facebook pour tagger les personnes d'une photo?
CSS & IE 6 : positionner une image sur une autre
Publié le 01/07/2009 @ 11:45:55,
Par antpPour le clic sur l'image ou pour l'affichage en CSS ensuite ? Pour le second cas je me dis que ça doit être assez basique à faire, il doit bien y avoir quelqu'un qui aurait une idée pour positionner une image par rapport à une autre
Le code source des pages de Facebook n'est pas des plus lisible
À la limite je pourrais aller voir du côté de Flickr...
Le code source des pages de Facebook n'est pas des plus lisible
À la limite je pourrais aller voir du côté de Flickr...
mes programmes ·· les voitures dans les films ·· champion des excuses bidons
CSS & IE 6 : positionner une image sur une autre
Publié le 01/07/2009 @ 12:15:56,
Par antpJ'ai trouvé ça :
http://www.fotonotes.net/
en plus il semblerait que Flickr s'en soit inspiré
Mais je n'ai pas besoin de tout ce qu'il y a là dedans, et réutiliser des bouts de code c'est pas évident non plus...
Dernière édition: 01/07/2009 @ 12:26:14
http://www.fotonotes.net/
en plus il semblerait que Flickr s'en soit inspiré
Mais je n'ai pas besoin de tout ce qu'il y a là dedans, et réutiliser des bouts de code c'est pas évident non plus...
Dernière édition: 01/07/2009 @ 12:26:14
mes programmes ·· les voitures dans les films ·· champion des excuses bidons
CSS & IE 6 : positionner une image sur une autre
Publié le 01/07/2009 @ 12:21:35,
Par DerrickJe ne sais pas si j'ai bien compris, mais c'est quelque chose comme ça que tu cherches?
http://tools.uvumi.com/crop.html
Désolé mais je ne sais pas vérifier si ça fonctionne sur IE6 d'ou je suis..
http://tools.uvumi.com/crop.html
Désolé mais je ne sais pas vérifier si ça fonctionne sur IE6 d'ou je suis..
CSS & IE 6 : positionner une image sur une autre
Publié le 01/07/2009 @ 12:49:47,
Par antpOui, mais il y en a plein des trucs du genre, donc je me demandais s'il y en avait un à conseiller. Surtout qu'il me faut un truc super basique, et pouvoir ensuite afficher la sélection en mode "read only" pour les visiteurs.
mes programmes ·· les voitures dans les films ·· champion des excuses bidons
CSS & IE 6 : positionner une image sur une autre
Publié le 05/07/2009 @ 17:41:21,
Par antpBon pour mon problème de coordonnées récupérées via Javascript c'est arrangé.
Note pour plus tard : avoir une variable nommée "top" c'est une mauvaise idée.
Toujours personne pour mon problème de CSS dans IE 6 ?
Note pour plus tard : avoir une variable nommée "top" c'est une mauvaise idée.
Toujours personne pour mon problème de CSS dans IE 6 ?
mes programmes ·· les voitures dans les films ·· champion des excuses bidons
CSS & IE 6 : positionner une image sur une autre
Publié le 07/07/2009 @ 09:20:01,
Par ClandestinoPeut-être que ceci (sous jQuery) t'aidera : http://blog.freelancer-id.com/index.php/2009/06/03/jquery-image-map
CSS & IE 6 : positionner une image sur une autre
Publié le 07/07/2009 @ 10:07:50,
Par antpAvec du JS c'est facile je pense, je peux réutiliser la logique que j'emploie pour voir où on a cliqué.
Mais pour l'affichage je voulais le faire en CSS pur C'est juste une image à positionner, ça doit pas être si sorcier, je ne pige pas pourquoi l'espace pris à l'emplacement de l'origine de l'image reste...
Dernière édition: 07/07/2009 @ 10:08:42
Mais pour l'affichage je voulais le faire en CSS pur C'est juste une image à positionner, ça doit pas être si sorcier, je ne pige pas pourquoi l'espace pris à l'emplacement de l'origine de l'image reste...
Dernière édition: 07/07/2009 @ 10:08:42
mes programmes ·· les voitures dans les films ·· champion des excuses bidons