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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  survoler un titre et afficher une image

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

survoler un titre et afficher une image

n°252028
tapiocca
Galicia Celta
Posté le 23-11-2002 à 15:14:22  profilanswer
 

Une cd-thèque en html.
 
Je veux avoir dans une frame un tableau :
- colonne de gauche : les jaquettes qui s'affichent dans une zone definie
- colonne de droite : les titres des albums
 
donc se qui m'interresse c'est de survoler les titres à droite de haut en bas selon mon classement et que automatiquement les jaquettes s'affichent dans la zone colonne de gauche sur la même page.
 
Je sais le faire, mais seulement dans une nouvelle page qui s'affiche par dessus mais pas dans une zone de la page html en cours.

mood
Publicité
Posté le 23-11-2002 à 15:14:22  profilanswer
 

n°252035
ValM
Posté le 23-11-2002 à 15:27:03  profilanswer
 

c'est du rollover éloigné... En Javascript c'est possible, piques le code source de mon site t'as juste a remplcer les images de mon menu par du texte : http://pysinou.free.fr/test


Message édité par ValM le 23-11-2002 à 15:29:18
n°252036
tapiocca
Galicia Celta
Posté le 23-11-2002 à 15:28:42  profilanswer
 

class, une reponse, j'ai voir ça de suite  ;)

n°252043
tapiocca
Galicia Celta
Posté le 23-11-2002 à 15:52:39  profilanswer
 

:(  ya que du script dans tout ça, j'suis un peu largué

n°252109
tapiocca
Galicia Celta
Posté le 23-11-2002 à 17:05:06  profilanswer
 

ValM a écrit a écrit :

c'est du rollover éloigné... En Javascript c'est possible, piques le code source de mon site t'as juste a remplcer les images de mon menu par du texte : http://pysinou.free.fr/test




 
je ne sais ou placer le texte à la place de tes images
 
(en passant, ton site à de la gueule)

n°252157
tapiocca
Galicia Celta
Posté le 23-11-2002 à 17:51:37  profilanswer
 

bon j'y arrive petit à petit, mais comment faire pour avoir le texte dans un tableau et l'image dans un autre tableau ?
 
car là en l'occurence tout se passe dans le même tableau
 
est ce que cela onctionne dans 2 frames differentes ?

n°252160
ValM
Posté le 23-11-2002 à 17:55:59  profilanswer
 

merci :)
 
Ben pour le texte c'est pas très compliqué voilà le code à placer dans ta pge Html :
 

Citation :

<HTML>
<HEAD><TITLE>Rollover sur une image éloignée</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// Fonction de rollover éloigné
function rollover_tjs(nom,src) {  
 // nom = nom de l'image
 // src = url du fichier image
 document.images[nom].src=src;
}
</SCRIPT>
</HEAD>
 
<BODY bgcolor="#FFFFFF">
<FONT FACE="Arial" SIZE='-1' COLOR="#000000">
 
<CENTER>
<TABLE>
    <TR>  
      <TD width=200><FONT FACE="Arial" SIZE='-1' COLOR="#000099">  
        <A href="#" onmouseover="rollover_tjs('image','image2.gif';)" onmouseout="rollover_tjs('image','image1.gif';)">Lien1</A><BR>
        <A href="#" onmouseover="rollover_tjs('image','image3.gif';)"
  onmouseout="rollover_tjs('image','image1.gif';)">Lien 2</A><BR>
        <A href="#" onmouseover="rollover_tjs('image','image4.gif';)" onmouseout="rollover_tjs('image','image1.gif';)">Lien 3</A><BR>
        </FONT></TD>
      <TD><IMG id=image name=image src="image1.gif"></TD>
    </TR>
  </TABLE>
</CENTER>
</FONT>  
</BODY></HTML>


 
Le mieux c'est de copier ce code dans un nouveau fichier Html pour mieux compendre comment ca fonctionne... dans l'exemple tu as 3 liens texte et lorsque tu passes dessus, l'image d'une cellule change suivant le lien. Il te faudra mettre des vraies images à toi à la place des images factisses (1,2,3,4).


Message édité par ValM le 23-11-2002 à 18:17:51
n°252161
ValM
Posté le 23-11-2002 à 18:02:53  profilanswer
 

tapiocca a écrit a écrit :

bon j'y arrive petit à petit, mais comment faire pour avoir le texte dans un tableau et l'image dans un autre tableau ?
 
car là en l'occurence tout se passe dans le même tableau
 
est ce que cela onctionne dans 2 frames differentes ?




 
c'est simple la seule ligne que tu as à déplacer c'est celle où il y a l'id de l'imge : "<IMG id=image name=image src="image1.gif">" c'est cette ligne qui indique à la fonction JS que c'est le contenu de cette cellule qui doit changer, donc tu peux la placer n'importe où dans ta page html même dans un tableau différent ca marchera sans problème normalement.
 

Citation :

<TABLE>
    <TR>  
      <TD width=200><FONT FACE="Arial" SIZE='-1' COLOR="#000099">  
        <A href="#" onmouseover="rollover_tjs('lesmiley','smiley2.gif';)" onmouseout="rollover_tjs('lesmiley','smiley1.gif';)">Lien1</A><BR>
        <A href="#" onmouseover="rollover_tjs('lesmiley','smiley3.gif';)"
  onmouseout="rollover_tjs('lesmiley','smiley1.gif';)">Lien 2</A><BR>
        <A href="#" onmouseover="rollover_tjs('lesmiley','smiley4.gif';)" onmouseout="rollover_tjs('lesmiley','smiley1.gif';)">Lien 3</A><BR>
        </FONT></TD>
    </TR>
</TABLE>
<TABLE>
    <TR>  
      <TD><IMG id=lesmiley name=lesmiley src="smiley1.gif"></TD>
    </TR>
</TABLE>


Message édité par ValM le 23-11-2002 à 18:18:32
n°252167
tapiocca
Galicia Celta
Posté le 23-11-2002 à 18:21:28  profilanswer
 

:jap:  t'es trop fort  :jap:  

n°252168
ValM
Posté le 23-11-2002 à 18:26:00  profilanswer
 

Le code n'est pas de moi... Moi aussi j'apprends le JS et quand je peux dépanner qq'un je le fais.
 
Bonne chance

mood
Publicité
Posté le 23-11-2002 à 18:26:00  profilanswer
 

n°252169
tapiocca
Galicia Celta
Posté le 23-11-2002 à 18:30:55  profilanswer
 

une petite derniere...
 
comment faire pour qu' au dessus de l'image, s'affiche aussi un texte : le titre de l'album (par ex.)  
 
c'est à dire que tous deux s'affichent en meme temps sans avoir à retoucher l'image
 
enfin est-ce possible?

n°252184
ValM
Posté le 23-11-2002 à 18:51:44  profilanswer
 

Ouaip c'est possible mais il faut rajouter une fonction JS pour le texte :
 

Citation :

function ChangeMessage(message,champ)
{
  if(document.getElementById)
    document.getElementById(champ).innerHTML = message;
}


 
et ca dans la cellule qui doit contenir le texte :
 

Citation :

<DIV id="ejs_texte"></DIV>


 
En suite il faut créer une autre fonction qui prend en charge la fonction de changement d'imges et celle des textes et malheureusement je n'ai pas encore réussi à en développer une qui fonctionnait correctement... Si qq'un a la soluce ca m'intéresse aussi :) !
 
Voir mon site : http://valm.free.fr j'ai réussi à le faire en utilisant des maps mais ca marche que sous IE et j'aimerais autant avoir un code propre.


Message édité par ValM le 23-11-2002 à 18:53:44
n°252186
tapiocca
Galicia Celta
Posté le 23-11-2002 à 18:53:39  profilanswer
 

:sarcastic:

n°252705
tapiocca
Galicia Celta
Posté le 24-11-2002 à 23:44:16  profilanswer
 

:heink:

n°252788
tapiocca
Galicia Celta
Posté le 25-11-2002 à 11:10:03  profilanswer
 

ValM a écrit a écrit :

Ouaip c'est possible mais il faut rajouter une fonction JS pour le texte :
 

Citation :

function ChangeMessage(message,champ)
{
  if(document.getElementById)
    document.getElementById(champ).innerHTML = message;
}


 
et ca dans la cellule qui doit contenir le texte :
 

Citation :

<DIV id="ejs_texte"></DIV>


 
En suite il faut créer une autre fonction qui prend en charge la fonction de changement d'imges et celle des textes et malheureusement je n'ai pas encore réussi à en développer une qui fonctionnait correctement... Si qq'un a la soluce ca m'intéresse aussi :) !
 
Voir mon site : http://valm.free.fr j'ai réussi à le faire en utilisant des maps mais ca marche que sous IE et j'aimerais autant avoir un code propre.




 
 [:sharpknife]  j'y arrive po

n°253034
tapiocca
Galicia Celta
Posté le 25-11-2002 à 15:45:32  profilanswer
 

j'arrive po a mettre deux roll over sur un texte
 
on survole un texte et a cote une image s'affiche et à un autre endroit un texte s'affiche

n°253337
tapiocca
Galicia Celta
Posté le 25-11-2002 à 19:17:33  profilanswer
 

:fou:  RIEN A FAIRE !!!!

n°254732
tapiocca
Galicia Celta
Posté le 27-11-2002 à 00:52:57  profilanswer
 

[:xtenseadsl]

n°255041
fatypunk
Java bien !
Posté le 27-11-2002 à 13:37:03  profilanswer
 

JS c'est de la merde :
 
D'abord tu gicle tes frames, c'est antique... tu refait tout ca avec des <div> et un bon CSS file à coté, genre bien ! Apres dans tes CSS tu utilise les propriétés "onMouseOver" etc... t'arrive à tout faire, c'est pèlus simple, plus clair, plus juste et surtout sans JS !!!

n°255070
gm_superst​ar
Appelez-moi Super
Posté le 27-11-2002 à 13:57:04  profilanswer
 

fatypunk a écrit a écrit :

JS c'est de la merde :
 
D'abord tu gicle tes frames, c'est antique... tu refait tout ca avec des <div> et un bon CSS file à coté, genre bien ! Apres dans tes CSS tu utilise les propriétés "onMouseOver" etc... t'arrive à tout faire, c'est pèlus simple, plus clair, plus juste et surtout sans JS !!!



Mon dieu, j'ai trouvé plus intégriste que moi :sweat:


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°255546
tapiocca
Galicia Celta
Posté le 27-11-2002 à 21:21:06  profilanswer
 

fatypunk a écrit a écrit :

JS c'est de la merde :
 
D'abord tu gicle tes frames, c'est antique... tu refait tout ca avec des <div> et un bon CSS file à coté, genre bien ! Apres dans tes CSS tu utilise les propriétés "onMouseOver" etc... t'arrive à tout faire, c'est pèlus simple, plus clair, plus juste et surtout sans JS !!!




 
 [:tecoswsn]

n°255557
antp
Super Administrateur
Champion des excuses bidons
Posté le 27-11-2002 à 21:26:56  profilanswer
 

fatypunk a écrit a écrit :

JS c'est de la merde :
 




 
je t'ai déjà demander de te calmer à ce sujet il me semble... :p
 
et on a toujours pas vu ton exemple de onmouseover en CSS qui n'utilise pas le javascript... jusqu'à présent ça ressemble à n'importe quoi ce que tu racontes...


Message édité par antp le 27-11-2002 à 21:27:45
n°255584
tapiocca
Galicia Celta
Posté le 27-11-2002 à 21:39:25  profilanswer
 

antp a écrit a écrit :

 
 
je t'ai déjà demander de te calmer à ce sujet il me semble... :p
 
et on a toujours pas vu ton exemple de onmouseover en CSS qui n'utilise pas le javascript... jusqu'à présent ça ressemble à n'importe quoi ce que tu racontes...




 
il est vraiment faché avec le JS, mais on sait po pourquoi?

n°255704
tapiocca
Galicia Celta
Posté le 27-11-2002 à 22:59:59  profilanswer
 

tapiocca a écrit a écrit :

j'arrive po a mettre deux roll over sur un texte
 
on survole un texte et a cote une image s'affiche et à un autre endroit un texte s'affiche




 
j'y arrive en survolant une image et afficher une autre image ailleurs et un texte aussi (ailleurs)
mais pas en survolant un texte

n°255889
fatypunk
Java bien !
Posté le 28-11-2002 à 10:12:25  profilanswer
 

antp a écrit a écrit :

 
 
je t'ai déjà demander de te calmer à ce sujet il me semble... :p
 
et on a toujours pas vu ton exemple de onmouseover en CSS qui n'utilise pas le javascript... jusqu'à présent ça ressemble à n'importe quoi ce que tu racontes...




 
Ouais j'était pas mal enervé hier, faut dire que ca abuse grave du JS par ici... l'exemple arrive, j'ai fini à 23h00 hier soir et la je suis toujours pas chez moi (et g pas mon Mozilla préferé necessaire à quelques tests). Je suis pourtant sur de ce que j'affirme, il y a peut-etre des erreur sur les details je connais pas tout par coeur..., mais sur le fond c'est tres clair !
 
JS execute un script sur la machine du client, donc ethiquement ce n'est pas acceptable !

n°255890
antp
Super Administrateur
Champion des excuses bidons
Posté le 28-11-2002 à 10:13:14  profilanswer
 
n°257472
tapiocca
Galicia Celta
Posté le 29-11-2002 à 22:39:27  profilanswer
 

tapiocca a écrit a écrit :

 
 
j'y arrive en survolant une image et afficher une autre image ailleurs et un texte aussi (ailleurs)
mais pas en survolant un texte




 
BON! mais... et moi alors ?...

n°257658
tapiocca
Galicia Celta
Posté le 30-11-2002 à 10:47:05  profilanswer
 

tojours rien, moi non plus, toujours pas reussi  :fou:


---------------
Que Viva Galicia y España [Quand on a pas ce que l'on aime, il faut aimer ce que l'on a!]
n°257714
fatypunk
Java bien !
Posté le 30-11-2002 à 13:38:34  profilanswer
 

http://www.meyerweb.com/eric/css/edge/
 
Tu vas dans pure CSS Popup ...using image
 
(Attention avec IE le site est tres instable, parce que IE ne respecte pas les standard !!!)
 
Mais tu peux faire en sorte de faire ce que tu veux faire en CSS et que ce soit compatible IE, c'est possible.
 
Si tu veux vraiment je te le fait... mais bon faut essayer aussi...

n°257748
gm_superst​ar
Appelez-moi Super
Posté le 30-11-2002 à 14:40:05  profilanswer
 
n°1695618
chana
Posté le 01-03-2008 à 18:41:29  profilanswer
 

Bonjour
Je ré-actualise ce message, parce que j'ai le même genre de pb et je n'arrive à trouver de solution.
J'ai crée des zones réactives sur une image. Sur chacune des zones, il y a un lien vers une page qui contient des ancres nommées.  
Je voudrais en plus du lien intervertir une image sur chaque zone.  
L'inversion d'image ne marche pas bien, j'ai du mal à avoir l'inversion et le lien  
Y a t-il une solution ?  
Je vous remercie pour votre aide


Message édité par chana le 01-03-2008 à 18:47:23
n°1697874
chana
Posté le 05-03-2008 à 21:19:47  profilanswer
 

Personne ne peut m'aider ? ?

mood
Publicité
Posté le   profilanswer
 


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

  survoler un titre et afficher une image

 

Sujets relatifs
[Reseaux de neurones]Cherche infos sur: compression image, reco typo,probleme d'image
Probleme de code ?? ( avec image )Erreur 500 lors du chargement d'une image [Résolu]
Script qui permet d'afficher une liste de fichier d'un répertoire[HELP] afficher infos sur un autre PC ( via port serie )
recupération d'une image d'un vidéo avec java[HTML,JS] Afficher l'adresse IP dans une page
Comment peut on superposer une image sur deux Colonnes HTML a la fois?euh.... comment on met une image dans un message du forum ??
Plus de sujets relatifs à : survoler un titre et afficher une image

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.102 secondes

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)