18073 sujets

Questions générales et questions de débutants

[Résolu] Positionner un élément pour une partie d'image

Je dispose d'une photo de classe. Je voudrais qu'au passage de la souris sur la tête d'un élève, il s'inscrive son nom et sa date de naissance.

Actuellement, j'utilise un systême TRES lourd : 


<div id="Conteneur">
 <a href="#" id="Prenom" onmouseover="Show('Prénom NOM','jour mois année');" onmouseout="Reset();"></a>
</div>


Chaque personne est placé en position:relative , ce qui est très long à faire ...

Si vous avez des idées pour une autre technique, avec les langes xHTML / CSS / Javascript ...
Modifié le 30 Dec 2004 - 01:27
Le problème, c'est que ces deux exemples sont valables pour plusieurs images dissociées ... Moi, l'image est en background du div conteneur !
Administrateur
Kevin a écrit :
Le problème, c'est que ces deux exemples sont valables pour plusieurs images dissociées ... Moi, l'image est en background du div conteneur !

Il faudrait voir la page en live, mais a priori :
Pourquoi inclure un <a> dans un <div> ? <a> devrait suffire, non ?
Cela résoudrait tes problèmes en intégrant un span dans ton <a>, puis en masquant (display none) et affichant (display bloc) le span au survol, comme sur le tutoriel dans le premier lien précédent.

D'ailleurs, j'ai encore mieux comme question : pourquoi mettre une image en background CSS alors qu'elle constitue un contenu pertinent ?
Ta photo apporte du contenu, elle semble essentielle au document, il ne faut donc pas utiliser les CSS pour l'afficher mais la balise <img>.

Remarque : toutes mes remarques ne sont que des suppositions à chaud, sans connaître ta structure.
[ hs]J'ai trouvé Kévin c'est le premier en haut à gauche Smiley lol . C'est vrai qu'on dirait que tu as avalé un smiley " Smiley decu "[ /hs]
L'image est un peu grande tout de même car en 1024 on ne voit pas le descriptif du sujet pointé, c'est dommage et tout le travail que cela représente devient un peu inutile pour le coup. Smiley cligne

édit:
Je me demande aussi à la réflexion d'un point de vue éthique, tu est sûr qu'ils sont tous d'accord pour voir leur photographie présentée sur un site, avec leur nom, prénom et date de naissance. ? J'imagine qu'en 1ère il y a des mineurs également. Cela doit être un point à vérifier à mon avis.
Modifié le 26 Dec 2004 - 20:04
Igor a écrit :

[ hs]J'ai trouvé Kévin c'est le premier en haut à gauche lol . C'est vrai qu'on dirait que tu as avalé un smiley " :decu: "[ /hs]


Bon ca va la moquerie là Smiley langue !?

Igor a écrit :

L'image est un peu grande tout de même car en 1024 on ne voit pas le descriptif du sujet pointé, c'est dommage et tout le travail que cela représente devient un peu inutile pour le coup. :cligne:


Oui, et c'est en le refaisant à une taille plus petite que je me suis rendu compte que vraiment, c'était long :| !

Igor a écrit :

édit:
Je me demande aussi à la réflexion d'un point de vue éthique, tu est sûr qu'ils sont tous d'accord pour voir leur photographie présentée sur un site, avec leur nom, prénom et date de naissance. ? J'imagine qu'en 1ère il y a des mineurs également. Cela doit être un point à vérifier à mon avis.


Tous les élèves seront consultés avant la mise en ligne du site ... Je fais très attention à ce genre de choses, après avoir pris deux ans de surcis l'an dernier, en faisant la même chose, mais avec des profs ... (lire ce post
Kevin a écrit :
Je fais très attention à ce genre de choses, après avoir pris deux ans de surcis l'an dernier, en faisant la même chose, mais avec des profs ... (lire ce post

Je me souvenais de ce post mais je savais plus où je l'avais vu Smiley vieux .
Malgré tout le fait de mettre des liens sur ce forum vers leur image est succeptible d'être référencé par des moteurs de recherche et disponible pour tous les internautes, conservé dans le cache de Google par exemple pour quelques temps encore. Bon tu me sembles bien averti quand même Smiley ravi et c'est le principal.
Oui oui, mais là, c'est juste pour tester Smiley langue , pis après, pfiou, delete Smiley langue !

Sinon, t'as une idée pour le problème de départ Smiley langue ?!
Oui, voilà, c'est ça ! Donc, tu utilises bien la même structure que moi *fier* , maiiiiiiiis, le problème, c'est que c'est super chiant à placer :s ... Moi j'ai voulu faire en position:relative, car j'me suis dis que j'allais galérer avec les marges sous IE si j'utilisais le float ...
Bon, donc, la suite des évènements ! J'utilise donc la structure : 

<div>
 <a>
 <a>
</div>


Les a sont placés en float, et pour éviter le problème de la double marge d'IE , j'ai suivi ces instructions . Donc, en gros, l'astuce est de styler les <a> avec un display:inline .

Les navigateurs Gecko ne voient pas la différence, mais ... c'est encore la cata sous IE ...

Quelqu'un a une idée pour parer ca ?
Bonjour Kevin,

Qu'appels-tu cata sous ie ???

Je suis sous xp avec ie6 et firefox et je n'ai pas de différence d'affichage, enfin je crois.

Petite suggestion, si tu n'as pas toutes les autorisations, tu devrais enlever les liens avant que ta page ne soit en cache dans les moteurs de recherche Smiley cligne .

Dans un cas comme ça, un peu particulier, je te suggère de donner le lien par mp aux personnes qui te viennent en aide, ça peut éviter d'éventuels problèmes.
Modifié le 28 Dec 2004 - 08:24
Idem je ne vois aucune différence entre IE6 et FireFox 1.0, si tu pouvait préciser quel est ton problème à l'heure actuelle... Smiley cligne

Un petit truc pour tous ceux qui veulent réaliser des images maps sans se prendre la tête avec les coordonnées. Dans votre logiciel de création graphique préféré il y a forcément une fonction qui affiche les coordonnées du pointeur de la souris (par exemple sous Phososhop c'est dans la fenètre "infos").

Normalement c'est tout ce dont vous aurez besoin mais n'oubliez pas qu'il existe aussi des outils de mesures (règles, grille, outil mesure, etc...).

Qui a dit qu'il fallait obligatoirement un programme wysiwyg pour faire ce genre de choses sans se faire mal à la tête? Smiley smile
Ouuuuuups, désolé, j'ai oublié de vous dire que c'était résolu :$ , j'ai finis par utiliser une map et des area sous IE ! Merci quand même =)
Sujet clos
Aller à