survoler un titre et afficher une image

survoler un titre et afficher une image - HTML/CSS - Programmation

Marsh Posté le 23-11-2002 à 15:14:22    

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.

Reply

Marsh Posté le 23-11-2002 à 15:14:22   

Reply

Marsh Posté le 23-11-2002 à 15:27:03    

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
Reply

Marsh Posté le 23-11-2002 à 15:28:42    

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

Reply

Marsh Posté le 23-11-2002 à 15:52:39    

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

Reply

Marsh Posté le 23-11-2002 à 17:05:06    

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)

Reply

Marsh Posté le 23-11-2002 à 17:51:37    

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 ?

Reply

Marsh Posté le 23-11-2002 à 17:55:59    

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
Reply

Marsh Posté le 23-11-2002 à 18:02:53    

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
Reply

Marsh Posté le 23-11-2002 à 18:21:28    

:jap:  t'es trop fort  :jap:  

Reply

Marsh Posté le 23-11-2002 à 18:26:00    

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

Reply

Marsh Posté le 23-11-2002 à 18:26:00   

Reply

Marsh Posté le 23-11-2002 à 18:30:55    

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?

Reply

Marsh Posté le 23-11-2002 à 18:51:44    

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
Reply

Marsh Posté le 23-11-2002 à 18:53:39    

:sarcastic:

Reply

Marsh Posté le 24-11-2002 à 23:44:16    

:heink:

Reply

Marsh Posté le 25-11-2002 à 11:10:03    

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

Reply

Marsh Posté le 25-11-2002 à 15:45:32    

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

Reply

Marsh Posté le 25-11-2002 à 19:17:33    

:fou:  RIEN A FAIRE !!!!

Reply

Marsh Posté le 27-11-2002 à 00:52:57    

[:xtenseadsl]

Reply

Marsh Posté le 27-11-2002 à 13:37:03    

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 !!!

Reply

Marsh Posté le 27-11-2002 à 13:57:04    

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
Reply

Marsh Posté le 27-11-2002 à 21:21:06    

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]

Reply

Marsh Posté le 27-11-2002 à 21:26:56    

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
Reply

Marsh Posté le 27-11-2002 à 21:39:25    

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?

Reply

Marsh Posté le 27-11-2002 à 22:59:59    

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

Reply

Marsh Posté le 28-11-2002 à 10:12:25    

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 !

Reply

Marsh Posté le 28-11-2002 à 10:13:14    

Reply

Marsh Posté le 29-11-2002 à 22:39:27    

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 ?...

Reply

Marsh Posté le 30-11-2002 à 10:47:05    

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!]
Reply

Marsh Posté le 30-11-2002 à 13:38:34    

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...

Reply

Marsh Posté le 30-11-2002 à 14:40:05    

Reply

Marsh Posté le 01-03-2008 à 18:41:29    

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
Reply

Marsh Posté le 05-03-2008 à 21:19:47    

Personne ne peut m'aider ? ?

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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