Aide pour afficher élément en survole

Question

Pages :

lddsoft

14 Nov 2012 à 16:02

(reprise du message précédent)

@qwertz1

As-tu lu mes posts de ce jour à 15:22:30 et à 15:31:53 ??

rodolpheb

14 Nov 2012 à 16:07

Peut-être que ça marchera:

</head>

<style type="text/css">
   #div2 {  
    visibility: hidden;  
  }
</style>
<script>
  function show(id) {
    document.getElementById(id).style.visibility = "visible";
  }
  function hide(id) {
    document.getElementById(id).style.visibility = "hidden";
  }
</script>
<body>
<div onMouseOver="show('div2')" onMouseOut="show('div2')">
  <div><img id="AP"  src="http://swisselegancy.com/images/Autres/Appareil_photo.png" alt="details" width="15" height="11'"  /></div>
</div>

  <div id="div2"><img id="FF" class="hidden" src="http://swisselegancy.com/images/Autres/F.png" alt="Contenu & accessoires" width="410px" height="352px" /></div>
</div>
</div>
</body>
</html>

Sous la supervision d'Iddsoft... Smiley smile

Modifié par rodolpheb (14 Nov 2012 - 16:13)

lddsoft

14 Nov 2012 à 16:20

J'ai pas essayé ton code rodolpheb, mais celui-ci marche (je l'ai testé):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Image au survol d'une autre image</title>
<script type="text/javascript">
function afficher(){
	var elm = document.getElementById('img2');
	var elm2 = document.getElementById('object1');
	if(elm.style.display=='inline-block'){
		elm.style.display='none';
		elm2.style.display='inline-block';
	}
	else {
		elm.style.display='inline-block';
		elm2.style.display='none';
	}
}
</script>
<style type="text/css">
#tableau {
	height:364px;
	margin-top:1px;
	margin-bottom:1px;
	margin-left:77px;
	font-family: "Lucida Grande";
	font-size:9px;
	line-height:11px;
}
#description {
	width:250px;
	background-color:#FCF;
}
#AP {
	position:relative;
	top:1px;
	cursor: pointer;
	display: inline-block;
	width: 13px;
	height: 9px;
}
#image {
	width:416px;
	text-align:left;
	background-color:#3CF;
	display: table-cell;
	text-align:center;
	vertical-align:middle;
}
#img2 {
	display: none;
	width: 408px;
	height: 350px;
}
#object1 {
	display: inline-block;
}
</style>
</head>
<body>
	<table id="tableau" border="0">
		<tr>
		  <td id="description">
			  <strong>A</strong> Détail 
			  <img id="AP" src="http://swisselegancy.com/images/Autres/Appareil_photo.png" alt="details" onmouseover="afficher();" onmouseout="afficher();" />
		  </td>
		  <td id="image">
			  <object id="object1" data="http://swisselegancy.com/images/Articles/Montres/Homme/Ebel/Ebel 1911 Discovery/Ebel 1911 Discovery Chronograph - 1215798.html" width="416px" height="358px"></object>
			  <img id="img2" src="http://swisselegancy.com/images/Autres/F.png" alt="" />
		  </td>
		</tr>
	</table>
</body>
</html>

@qwertz1
J'ai dû revoir mon code de 15:22:30. Examine bien les modifs!

EDIT: Sous Google Chrome la vidéo redémarre au début à chaque mouseover Smiley bawling

.
Sous IE8 et Firefox 16.0.2 pas de souci.
Modifié par lddsoft (14 Nov 2012 - 16:25)

rodolpheb

14 Nov 2012 à 16:27

Le problème avec ton code c'est qu'à chaque fois qu'on survol l'appareil photo ta vidéo se recharge alors que sur mon code non...

lddsoft

14 Nov 2012 à 16:41

@rodolpheb

A ce propos, où est passé

<object id="object1" data="http://swisselegancy.com/images/Articles/Montres/Homme/Ebel/Ebel 1911 Discovery/Ebel 1911 Discovery Chronograph - 1215798.html" width="416px" height="358px"></object>

dans ton code ?

qwertz1

14 Nov 2012 à 16:48

Merci c'est presque ça, mais malheureusement l'image ne vient s'afficher qu'en dessous de l'object au lieu de s'afficher très exactement (très exactement car même taille) en dessus de ce dernier.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Image au survol d'une autre image</title>
<script type="text/javascript">
function afficher(){
	var elm = document.getElementById('img2');
	(elm.style.display=='inline-block')? elm.style.display='none' : elm.style.display='inline-block';
}
</script>
<style type="text/css">
#tableau {
	height:364px;
	margin-top:1px;
	margin-bottom:1px;
	margin-left:77px;
	font-family: "Lucida Grande";
	font-size:9px;
	line-height:11px;
}
#description {
	width:250px;
	background-color:#FCF;
}
#AP {
	position:relative;
	top:1px;
	cursor: pointer;
	display: inline-block;
	width: 13px;
	height: 9px;
}
#image {
	width:416px;
	text-align:left;
	background-color:#3CF;
	display: table-cell;
	text-align:center;
	vertical-align:middle;
}
#object1 {
	position:relative;
	overflow:hidden;
	left:6px;
	top:4px;
}
#img2 {
	display: none;
	width: 408px;
	height: 350px;
}
</style>
</head>
<body>
	<table id="tableau" border="0">
		<tr>
		  <td id="description">
			  <strong>A</strong> xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />Détail 
			  <img id="AP" src="http://swisselegancy.com/images/Autres/Appareil_photo.png" alt="details" onmouseover="afficher();" onmouseout="afficher();" />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />
		  </td>
		  <td id="image">
			  <object id="object1" data="http://swisselegancy.com/images/Autres/A.html" width="416px" height="358px"></object>
			  <img id="img2" src="http://swisselegancy.com/images/Autres/F.png" alt="" />
		  </td>
		</tr>
	</table>
</body>
</html>

rodolpheb

14 Nov 2012 à 16:51

@Iddsoft
Je teste actuellement avec ta vidéo en question et étant sous mac ta vidéo se lance toute seule sans rollover. Depuis ton code je ne parviens pas à stopper la vidéo au démarrage avec "autoplay" et "autoStart"

N'y vois absolument aucune critique dans mes remarques c'est juste une émulation très positive dans la quête des bonnes réponses. Smiley smile

Modifié par rodolpheb (14 Nov 2012 - 16:52)

qwertz1

14 Nov 2012 à 17:01

rodolpheb a écrit :
@Iddsoft
Je teste actuellement avec ta vidéo en question et étant sous mac ta vidéo se lance toute seule sans rollover. Depuis ton code je ne parviens pas à stopper la vidéo au démarrage avec "autoplay" et "autoStart"

N'y vois absolument aucune critique dans mes remarques c'est juste une émulation très positive dans la quête des bonnes réponses.

Oui je sais, mais malheureusement je fais avec. Du moment que la video (temporairement remplacer par une image rouge au même dimension) ne s'arrête pas.

Et actuellement le problème sur le dernier code et que la nouvelle image ne ce place pas correctement (c'est à dire en dessus)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Image au survol d'une autre image</title>
<script type="text/javascript">
function afficher(){
	var elm = document.getElementById('img2');
	(elm.style.display=='inline-block')? elm.style.display='none' : elm.style.display='inline-block';
}
</script>
<style type="text/css">
#tableau {
	height:364px;
	margin-top:1px;
	margin-bottom:1px;
	margin-left:77px;
	font-family: "Lucida Grande";
	font-size:9px;
	line-height:11px;
}
#description {
	width:250px;
	background-color:#FCF;
}
#AP {
	position:relative;
	top:1px;
	cursor: pointer;
	display: inline-block;
	width: 13px;
	height: 9px;
}
#image {
	width:416px;
	text-align:left;
	background-color:#3CF;
	display: table-cell;
	text-align:center;
	vertical-align:middle;
}
#object1 {
	position:relative;
	overflow:hidden;
	left:6px;
	top:4px;
}
#img2 {
	display: none;
	width: 408px;
	height: 350px;
}
</style>
</head>
<body>
	<table id="tableau" border="0">
		<tr>
		  <td id="description">
			  <strong>A</strong> xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />Détail 
			  <img id="AP" src="http://swisselegancy.com/images/Autres/Appareil_photo.png" alt="details" onmouseover="afficher();" onmouseout="afficher();" />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />
		  </td>
		  <td id="image">
			  <object id="object1" data="http://swisselegancy.com/images/Autres/A.html" width="416px" height="358px"></object>
			  <img id="img2" src="http://swisselegancy.com/images/Autres/F.png" alt="" />
		  </td>
		</tr>
	</table>
</body>
</html>

Modifié par qwertz1 (14 Nov 2012 - 17:04)

lddsoft

14 Nov 2012 à 17:26

J'ai constaté que le problème dans mon code qui ne fonctionne pas sous Google Chrome venait du fait de l'emploi de "object" pour charger une page contenant un "iframe".
Si on place cet iframe à la place de "object", ça marche!

<!DOCTYPE html>
<html>
  <head>
	<meta charset="UTF-8" />
    <title>Image au survol d'une autre image</title>
    <script>
	//<![CDATA[
    function afficher(){
        var elm = document.getElementById('img2');
        var elm2 = document.getElementById('object1');
        if(elm.style.display=='inline-block'){
			elm.style.display='none';
			elm2.style.display='inline-block';
        }
        else {
			elm.style.display='inline-block';
			elm2.style.display='none';
        }
    }
    //]]>
    </script>
    <style>
/*<![CDATA[*/
    #tableau {
        height:364px;
        margin-top:1px;
        margin-bottom:1px;
        margin-left:77px;
        font-family: "Lucida Grande";
        font-size:9px;
        line-height:11px;
    }
    #description {
        width:250px;
        background-color:#FCF;
    }
    #AP {
        position:relative;
        top:1px;
        cursor: pointer;
        display: inline-block;
        width: 13px;
        height: 9px;
    }
    #image {
        width:416px;
        text-align:left;
        background-color:#3CF;
        display: table-cell;
        text-align:center;
        vertical-align:middle;
    }
    #img2 {
        display: none;
        width: 408px;
        height: 350px;
    }
    #object1 {
        display: inline-block;
	width: 408px;
	height: 350px;
    }
    /*]]>*/
    </style>
  </head>
  <body>
    <table id="tableau" border="">
      <tr>
        <td id="description">
          <strong>A</strong> Détail <img id="AP" src="http://swisselegancy.com/images/Autres/Appareil_photo.png" alt="details" onmouseover="afficher();" onmouseout="afficher();">
        </td>
        <td id="image">
		  <div id="object1">
			  <iframe width="408" height="350" src="http://www.youtube.com/v/oardObrvwyY?&amp;autoplay=1&amp;loop=1&amp;showinfo=0&amp;autohide=1&amp;fs=1&amp;rel=0"></iframe>
		  </div>
             <img id="img2" src="http://swisselegancy.com/images/Autres/F.png" alt="">
        </td>
      </tr>
    </table>
  </body>
</html>

Prenez le code ci-dessus TEL QU'IL EST et testez!

rodolpheb

14 Nov 2012 à 17:47

Je regrette Iddsoft mais ça ne fonctionne pas chez moi.

Je dois faire cela:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Image au survol d'une autre image</title>

<script>
  function show(id) {
    document.getElementById(id).style.visibility = "visible";
  }
  function hide(id) {
    document.getElementById(id).style.visibility = "hidden";
  }
  </script>
<style type="text/css">
  #div2 {  
    visibility: hidden;  
  }
#tableau {
	height:364px;
	margin-top:1px;
	margin-bottom:1px;
	margin-left:77px;
	font-family: "Lucida Grande";
	font-size:9px;
	line-height:11px;
}
#description {
	width:250px;
	background-color:#FCF;
}
#AP {
	position:relative;
	top:1px;
	cursor: pointer;
	display: inline-block;
	width: 13px;
	height: 9px;
}
#image {
	width:416px;
	text-align:left;
	background-color:#3CF;
	display: table-cell;
	text-align:center;
	vertical-align:middle;
}

</style>
</head>
<body>
	<table id="tableau" border="0">
		<tr>
		  <td id="description">
			  <strong>A</strong> xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br /><div onMouseOver="show('div2')" onMouseOut="show('div2')">
  <div><img id="AP"  src="http://swisselegancy.com/images/Autres/Appareil_photo.png" alt="details" width="15" height="11'" /></div>
</div>xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />
		  </td>
		  <td id="image">
			 <div id="div2">
			  <iframe width="408" height="350" src="http://www.youtube.com/v/oardObrvwyY?&amp;autoplay=1&amp;loop=1&amp;showinfo=0&amp;autohide=1&amp;fs=1&amp;rel=0"></iframe>
		  </div>
		  </td>
		</tr>
	</table>
</body>
</html>

qwertz1

14 Nov 2012 à 18:04

Un grand merci à vous 2, le resultat est parfait avec le code suivant:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Image au survol d'une autre image</title>
<script>
	//<![CDATA[
    function afficher(){
        var elm = document.getElementById('img2');
        var elm2 = document.getElementById('object1');
        if(elm.style.display=='inline-block'){
			elm.style.display='none';
			elm2.style.display='inline-block';
        }
        else {
			elm.style.display='inline-block';
			elm2.style.display='none';
        }
    }
    //]]>
    </script>
<style type="text/css">
#tableau {
	height:364px;
	margin-top:1px;
	margin-bottom:1px;
	margin-left:77px;
	font-family: "Lucida Grande";
	font-size:9px;
	line-height:11px;
}
#description {
	width:250px;
	background-color:#FCF;
}
#AP {
	position:relative;
	top:1px;
	cursor: pointer;
	display: inline-block;
	width: 13px;
	height: 9px;
}
#image {
	width:416px;
	text-align:left;
	background-color:#3CF;
	display: table-cell;
	text-align:center;
	vertical-align:middle;
}
#object1 {
	position:relative;
	overflow:hidden;
	left:6px;
	top:4px;
}
#img2 {
	display: none;
	width: 408px;
	height: 350px;
}
</style>
</head>
<body>
	<table id="tableau" border="0">
		<tr>
		  <td id="description">
			  <strong>A</strong> Détail 
			  <img id="AP" src="http://swisselegancy.com/images/Autres/Appareil_photo.png" alt="details" onmouseover="afficher();" onmouseout="afficher();" />
		  <td id="image">
			  <object id="object1" data="http://swisselegancy.com/images/Autres/A.html" width="416px" height="358px"></object>
			  <img id="img2" src="http://swisselegancy.com/images/Autres/F.png" alt="" />
		  </td>
		</tr>
	</table>
</body>
</html>

qwertz1

14 Nov 2012 à 18:15

Il y a juste encore un petit problème, lorsque je diminue la taille de mon navigateur en largeur, l'image de droite vient manger la partie de gauche. Comment faire pour que ce dernier ne ce déplace pas?

Voir en image: http://imagesup.org/images11/1352913246-a1.png

lddsoft

14 Nov 2012 à 20:24

Je me demande en fin de compte quel résultat vous voulez obtenir Smiley biggol

.
Il m'est impossible de tester mon code sur MAC, puisque je suis sous PC.
Je m'étonne de voir les conditions de départ changer constamment (au départ, il s'agit d'intégrer une vidéo, et à l'arrivée, il ne s'agit plus que d'une simple image). Que veut-on EXACTEMENT ????

qwertz1

14 Nov 2012 à 20:50

Le résultat et parfait. Video ou image par object. Mais le petit problème est l'image de droite vient manger la partie de gauche: http://imagesup.org/images11/1352913246-a1.png

rodolpheb

14 Nov 2012 à 21:39

Si j'ai compris ce que tu veux, applique ça à ton image, pour commencer:

max-width: 100%;
	height: auto;
	width: auto;
	box-sizing: border-box;

#Iddsoft : Je testerai mon code demain sur Pc.

En tout cas ces échanges, et c'est leurs buts, m'ont permis d'apprendre des points de détails intéressants.
Modifié par rodolpheb (14 Nov 2012 - 21:39)

qwertz1

14 Nov 2012 à 21:50

Merci mais ton code ne fonctionne pas.

qwertz1

15 Nov 2012 à 05:33

Je parviens à contourner ce problème en placent une image de 250px de largeur, mais si quelqu'un aurait une autre solution, je suis preneur:

http://imagesup.org/images11/1352953918-f.png


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Image au survol d'une autre image</title>
<script>
	//<![CDATA[
    function afficher(){
        var elm = document.getElementById('img2');
        var elm2 = document.getElementById('object1');
        if(elm.style.display=='inline-block'){
			elm.style.display='none';
			elm2.style.display='inline-block';
        }
        else {
			elm.style.display='inline-block';
			elm2.style.display='none';
        }
    }
    //]]>
    </script>
<style type="text/css">
#tableau {
	height:364px;
	margin-top:1px;
	margin-bottom:1px;
	margin-left:77px;
	font-family: "Lucida Grande";
	font-size:9px;
	line-height:11px;
}
#description {
	width:250px;
	background-color:#FCF;
}
#AP {
	position:relative;
	top:1px;
	cursor: pointer;
	display: inline-block;
	width: 13px;
	height: 9px;
}
#image {
	width:416px;
	text-align:left;
	background-color:#3CF;
	display: table-cell;
	text-align:center;
	vertical-align:middle;
}
#object1 {
	width:416px;
	position:relative;
	overflow:hidden;
	left:6px;
	top:4px;
}
#img2 {
	display: none;
	width: 408px;
	height: 350px;
}
</style>
</head>
<body>
	<table id="tableau" border="0">
		<tr>
		  <td id="description">
			  <strong>A</strong> Détail <br>xxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxxxxxxx xxxxxxx xxx xx xxxxxxxxxx xxx xxxxxxxx
			  <img id="AP" src="http://swisselegancy.com/images/Autres/Appareil_photo.png" alt="details" onmouseover="afficher();" onmouseout="afficher();" />
          <img src="http://imagesup.org/images11/1352953679-as.png" width="250" height="1">		  <td id="image">
			  <object id="object1" data="http://swisselegancy.com/images/Autres/A.html" width="416px" height="358px"></object>
			  <img id="img2" src="http://swisselegancy.com/images/Autres/F.png" alt="" />
		  </td>
		</tr>
	</table>
</body>
</html>

Pages :

Sujet clos

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

Aide pour afficher élément en survole