Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2766 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  survol d'un lien, apparition decalee d'une image, au secours !!!!

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

survol d'un lien, apparition decalee d'une image, au secours !!!!

n°1663540
LDL
Posté le 27-12-2007 à 23:36:10  profilanswer
 

bonjour !
 
je fais appel aux avances dans la construction dun website, car je debute, et c'est pas toujours evident.
voila, j'explique mon petit probleme que j'essaie en vain de solutionner apres avoir epuise toutes les explications du net, sans a voir trouver !
 
J'ai un blog sur blogspot que j'ai transforme en website perso, sur ce blog 2 possibilites de parametrages d'elements, soit l'acces direct au code HTML de la page, soit le postage d'elements (image, videos, objet HTML/Javascript).
 
Je ne sais pas du tout manier le CSS de la page (head, body, etc...) donc je prefererais utiliser le postages d'elements via les traditionnels <> avec les balises uniquement en code html.
dans cette technique, je cherche a faire apparaitre une image au survol d'un hypertexte et que cette image soit placee a un tout autre endroit de l'hypertexte, lorsque la souris n'est plus sur ce lien l'image disparaissant... j'ai trouve bcp de chose sur le net via google mais ien sur ce cas la, en html !
 
 
 
 
j'ai bien pense a l'utilisation de onmouseover / onmouseout mais je n'arrive pas a coupler un texte avec une image.
je l'ai fait avec 2 images et ca fonctionnent tres bien, ce qui donne ca par exemple :
 
<span style="position: absolute; top:255px; left:737px"><img onmouseover="image.src='http://img165.imageshack.us/img165/3020/rocksvn2tx3.png'" src="http://img402.imageshack.us/img402/6541/rocksvn1jp2.png" onmouseout="image.src='http://img402.imageshack.us/img402/6541/rocksvn1jp2.png'" name="image" /></span>
 
mais ce cas la est 2 images, et qui plus est ! 2 images placees au meme endroit !
 
 
 
 
j'ai trouve que l'utilisation texte-image serait d'apres ce que j'ai compris plutot par la balise "infobulle", mais comment faire ?????
franchement je m'emmele les pinceaux et je m'en sors pas du tout !!!!!!!! voici mon dernier essai, evidemment c'est completement foireux et ca fonctionne pas !
 
<span id infobulle="display: none;" style="position:absolute; top:604px; left:1164px; font-size:117%;"><a style="text-decoration:none" class="second" href="#" name="texte">texte</a></span>
 
<span id infobulle=”display: inline;”><img src=" http://bp3.blogger.com/_12CR_QVg-h [...] if-205.jpg " style=”position: absolute; top:255px; left:737px; width: 128px; height: 128px;” alt="image" name=”infobulle”  /></span>
 
je sais que j'ai tout faux, mais franchement j'arrive meme plus a trouver ou ca merde !
quelqu'un aurait il la gentillesse de m'aider ????
 
 
 
 
Merci encore pour votre aide...
(je sais aussi que certaines ecritures comme le positionnement sont plutot strange c'est le cas de le dire mais je debute, donc evidemment ca doit etre bourre d'incoherences de tous genres...sorry...)
:)
 
 
.


Message édité par LDL le 28-12-2007 à 04:02:36
mood
Publicité
Posté le 27-12-2007 à 23:36:10  profilanswer
 

n°1663795
David Bori​ng
Posté le 28-12-2007 à 20:00:28  profilanswer
 

Tu peux faire cela en css, avec la pseudo-classe "hover" sur un lien.
Mais le problème c'est que je ne vois pas comment tu peux injecter du css directement dans le html avec cette pseudo-classe.
Tu peux à mon avis, soit le faire en JavaScript
ou en css si tu veux bien ajouter quelques lignes au fichier css de ton site.

Code :
  1. .image img {
  2. display:none;
  3. position:absolute;
  4. top:150px;
  5. left:350px;
  6. border:none
  7. }
  8. .image:hover img {display:inline;}


 
ensuite tu devras simplement donner un classe au lien dans ton post

Code :
  1. <a class="image" href="#" alt="description de l'image" >ceci est un lien
  2. <img src="http://bp3.blogger.com/_12CR_QVg-hA/R3HdsGK0yFI/AAAAAAAAAhQ/XtmX-3GHDGM/s400/N%26B+7tif-205.jpg" />
  3. </a>


C'est quand même plus simple si tu ne dois pas mettre tout le code css à chaque fois.
 
 

n°1663847
LDL
Posté le 29-12-2007 à 00:36:03  profilanswer
 

David Boring a écrit :

Tu peux faire cela en css, avec la pseudo-classe "hover" sur un lien.
Mais le problème c'est que je ne vois pas comment tu peux injecter du css directement dans le html avec cette pseudo-classe.
Tu peux à mon avis, soit le faire en JavaScript
ou en css si tu veux bien ajouter quelques lignes au fichier css de ton site.

Code :
  1. .image img {
  2. display:none;
  3. position:absolute;
  4. top:150px;
  5. left:350px;
  6. border:none
  7. }
  8. .image:hover img {display:inline;}


 
ensuite tu devras simplement donner un classe au lien dans ton post

Code :
  1. <a class="image" href="#" alt="description de l'image" >ceci est un lien
  2. <img src="http://bp3.blogger.com/_12CR_QVg-hA/R3HdsGK0yFI/AAAAAAAAAhQ/XtmX-3GHDGM/s400/N%26B+7tif-205.jpg" />
  3. </a>


C'est quand même plus simple si tu ne dois pas mettre tout le code css à chaque fois.
 
 


merci pour le coup de main !!!!!!
 
bon j'ai renonce a le passer en HTML sans passer par le CSS.
 
Donc me voila dans le corps, j'ai insere le code dans le body ca donne ca :
 
 
.image img {
display:none;
position:absolute;
top:-10px;
left:-600px;
border:none
}
.image:hover img {display:inline;}
 
 
Bizzaremment l'image s'affichait en dessous du lien, il a fallu donc que j'y mette des valeurs negatifs sur la position pour l'avoir ou je voulais.
Comme il y a 9 images correspondant au 9 liens de la page, il faudra aussi que je cree cette codification pour 9 images distinctes, chacune correspondant a un lien precis !
 
 
 
Bon ensuite j'ai insere un objet dans la partie pre parametre du site (c'est pas comme un website classique ou on met tout dans le code source), l'insertion de l'objet HTML donne ca :
 
 
<span style="position:absolute; top:604px; left:91.4%; font-size:117%;"><a style="text-decoration:none" class="image" href="#">fashion<img alt="fashion" src="http://bp3.blogger.com/_12CR_QVg-hA/R3HdsGK0yFI/AAAAAAAAAhQ/XtmX-3GHDGM/s400/N%26B+7tif-205.jpg"/></a></span>
 
 
 
positionnement du lien,
resize de la police par : font-size:117%;"
suppression de la forma basique de lien bleu souligne par : text-decoration:none"
nomination de l'image en remplacement du chargement.
 
Maintenant avec ca je ne peux pas garder mon parametrage de couleurs du lien, il faudra que je cree une class de lien type IMAGE et evidemment que je dise dans le code CSS le lien image est de telle couleur et au survl devient telle couleur,
 
 
Par contre si ca fonctionne tres bien sous firefox et opera,
ca fonctionne pas du tout sous internet explorer !!!!!!
 
ca c'est chiant....
 
;)
 
 
.


Message édité par LDL le 29-12-2007 à 00:48:04
n°1663850
LDL
Posté le 29-12-2007 à 00:48:21  profilanswer
 

(j'ai edite mon post apres verif...)
apres recherche, apparemment explorer peut pas gerer la pseudo-class hover sans <a>...
 
par contre je sais pas comment faire !
comment il faut l'utiliser dans mon cas ??????
 
.


Message édité par LDL le 29-12-2007 à 01:24:02

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  survol d'un lien, apparition decalee d'une image, au secours !!!!

 

Sujets relatifs
Bash - pivoter une image avec bash sous mac os XSource Capture Image Webcam ?
Ouvrir une image en popup - Lightbox 2 insideProblème étrange d'affichage d'image avec gotoAndStop
Aligner une image à gauche en xhtmlAu secours de mes Z-index !
Insérer une image DANS le code htmlVBA 2007 et INET: serveur OLE introuvable... Au secours !
Diviser une bannière en plusieur lien (si possible)acceder a forms et report 6i (oracle) via un lien url
Plus de sujets relatifs à : survol d'un lien, apparition decalee d'une image, au secours !!!!


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR