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

survol d'un lien, apparition decalee d'une image, au secours !!!! - HTML/CSS - Programmation

Marsh Posté le 27-12-2007 à 23:36:10    

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
Reply

Marsh Posté le 27-12-2007 à 23:36:10   

Reply

Marsh Posté le 28-12-2007 à 20:00:28    

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.
 
 

Reply

Marsh Posté le 29-12-2007 à 00:36:03    

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
Reply

Marsh Posté le 29-12-2007 à 00:48:21    

(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
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed