Afficher une image au survol sur un texte

Question

valmax

28 Aug 2019 à 09:37

Bonjour,

J'ai un code pour afficher une image au survol sur un texte, qui fonctionne très bien, mais je voudrais lui apporter une modification et je n'arrive pas!
J’ai tableau et ce tableau est à l’intérieur d’un cadre et lorsque je passe sur un nom qui se trouve dans une cellule de mon tableau
je n'arrive pas à déplacer l'image en dehors du cadre ?

Je vous joint mon code au complet:

<!Doctype Html>
<html>
<head>
<title></title>
<meta charset="UTF-8"/>


<style>

           body {
 	background: #000;
 	color: #fff;
 }
   /*===========Code affiche une photo passage sur le nom==========*/ 
 a.info {
 	position: relative;
 	text-decoration: none;
 	color: red;
 }
 a.info span {
 	display: none;
 }
 a.info:hover {
 	background: none;
 	/* correction d'un bug IE */
 	z-index: 100;
 }
 a.info:hover span {
 	display: inline;
 	position: absolute;
 	top: 2em;
 	left: -5em;
 	text-align: center;
 	color: #170eed;
 	padding: 2px;
 }
    /*=============================================*/
    
 .scrollbar {
 	margin-left: 22px;
 	float: left;
 	height: 550px;
 	width: 980px;
 	background: #151313;
 	overflow-y: scroll;
 	margin-bottom: 55px;
 }
 .force-overflow {
 	min-height: 10px;
 }
 #wrapper {
 	text-align: center;
 	margin: auto;
 }
 #style-2::-webkit-scrollbar-track {
 	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 	border-radius: 10px;
 	background-color: #080808;
 }
 #style-2::-webkit-scrollbar {
 	width: 15px;
 	/*largeur de la scrollBar*/
 	background-color: #080808;
 	/*Couleur du fond de la scrollBar*/
 }
 #style-2::-webkit-scrollbar-thumb {
 	border-radius: 10px;
 	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
 	background-color: #D62929;
 	height: 50px;
 	/*couleur de la ScrollBar*/
 }
 .map__image {/*cadre rouge autour du tableau*/
 	position: absolute;
 	top: 90px;
 	left: 20px;
 	border: 1px solid red;
 	width: 990px;
 	height: 640px;
 	margin: 0px;
 }
 #tableau {
 	position: absolute;
 	top: 70px;
 	left: -20px;
 }
 .titre {
 	width: 970px;
 	margin-left: 10px;
 	height: 70px;
 	font-size: 34px;
 	text-align: center;
 	color: #ecff07;
 	font-style: italic;
 	font-weight: bold;
 }
 /*    .photo{position: absolute;top: 100px;left: 900px;}*/
 /*    .text{position: absolute;top: 100px;left: 900px;}*/
 p {
 	font-size: 18px;
 }
 #alpha {
 	position: absolute;
 	top: 0px;
 	left: 45px;
 }
 #deputes-nav a {
 	position: relative;
 	font-size: 16px;
 	font-style: italic;
 	font-weight: bold;
 	display: block;
 	float: left;
 	padding: 2px 6px;
 	text-decoration: none;
 	min-width: 1.5em;
 	text-align: center;
 	overflow: hidden;
 	margin-top: 20px;
 	border: none;
 	border-top: 2px solid #FFC0CB;
 	color: #f5e308;
 }
 #deputes-nav a span.letter_count {
 	position: absolute;
 	left: 0px;
 	width: 100%;
 	text-align: center;
 	top: -20px;
 	color: #fff;
 	font-size: 0.8em;
 }
 #deputes-nav.court a {
 	border: none;
 	border-top: 2px solid #FFC0CB;
 	font-size: 1.25em;
 	color: #B53333;
 	padding: 2px 2px;
 	min-width: 1.5em;
 }
 #deputes-nav a.ln-last {
 	border-right: none;
 }
 #deputes-nav a:hover,
 #deputes-nav a.selected {
 	border-top: 5px solid #FF0000;
 	background-color: #FFC0CB;
 	color: #fc0b0b !important;
 	overflow: visible;
 }
 #deputes-nav a.disabled {
 	color: #FFC0CB;
 }
 #deputes-nav a.disabled:hover {
 	color: #fff;
 }
 #deputes-nav a:hover span.letter_count {
 	color: #FF0000;
 	background-color: #fff;
 }
 .lm-wrapper .lm-letter-count {
 	color: red;
 	position: absolute;
 }
 h2 {
 	border-bottom: 1px dotted #94C5DE;
 	color: #f7ee0a;
 	margin: 15px 0 5px 0;
 	padding: 0 0 2px;
 	text-align: center;
 	text-transform: uppercase;
 }

</style>
</head>

<body>
	<!--*********************NE PAS DEPLACER**********************-->
	<div class="map__image">
		<table>
			<tr>
				<th id="liste">
					<div id="alpha">
						<nav id="deputes-nav">	<a href="#" title="576" class="selected">Tous<span class="letter_count">576</span></a>
							<a href="#A" title="23">A<span class="letter_count">23</span></a>
							<a href="#B" title="71">B<span class="letter_count">71</span></a>
							<a href="#C" title="47">C<span class="letter_count">47</span></a>
							<a href="#D" title="45">D<span class="letter_count">45</span></a>
							<a href="#E" title="8"> E<span class="letter_count">8</span></a>
							<a href="#F" title="24">F<span class="letter_count">24</span></a>
							<a href="#G" title="33">G<span class="letter_count">33</span></a>
							<a href="#H" title="18">H<span class="letter_count">18</span></a>
							<a href="#I" title="2"> I<span class="letter_count">2</span></a>
							<a href="#J" title="11">J<span class="letter_count">11</span></a>
							<a href="#K" title="15">K<span class="letter_count">15</span></a>
							<a href="#L" title="57">L<span class="letter_count">57</span></a>
							<a href="#M" title="47">M<span class="letter_count">47</span></a>
							<a href="#N" title="5"> N<span class="letter_count">5</span></a>
							<a href="#O" title="5"> O<span class="letter_count">5</span></a>
							<a href="#P" title="46">P<span class="letter_count">46</span></a>
							<a href="#Q" title="3"> Q<span class="letter_count">3</span></a>
							<a href="#R" title="32">R<span class="letter_count">32</span></a>
							<a href="#S" title="23">S<span class="letter_count">23</span></a>
							<a href="#T" title="27">T<span class="letter_count">27</span></a>
							<a href="#U" title="1"> U<span class="letter_count">1</span></a>
							<a href="#V" title="25">V<span class="letter_count">25</span></a>
							<a href="#W" title="5"> W<span class="letter_count">5</span></a>
							<a href="#Z" title="3"> Z<span class="letter_count">3</span></a>
						</nav>
					</div>
				</th>
			</tr>
		</table>
		<div id="tableau">
			<div class="scrollbar" id="style-2">
				<div class="force-overflow"></div>
                
    <!--************************************************************************************************************************-->
                
				<table width="938" border="3" align="center" bordercolor="#4C5870">
					<tr>
						<td height="5" colspan="3">
							<a name="A" title="23"></a>
							<P>A</P>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">Mr. Damien Abad<span><img class="photo" src="../portraits/Damien Abad.jpg" width="120" height="150" border="0" /><p class="text">Ain (5e circonscription)</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">Mme Caroline Abadie<span><img class="photo" src="../portraits/Caroline Abadie.jpg" width="120" height="150" border="0" /><p class="text">Isère (8e circonscription)</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">Mme Bérangère Abba<span><img class="photo" src="../portraits/Bérangère Abba.jpg" width="120" height="150" border="0" /><p class="text">Haute-Marne (1re circonscription)</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td colspan="3">
							<a name="B" title="23"></a>
							<P>B</P>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td colspan="3">
							<a name="C" title="23"></a>
							<P>C</P>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
					<tr>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
						<td width="33%" align="center"><a class="info" href="#.html">xxxxxxx<span><img class="photo" src="../portraits/xxxxxxx.jpg" width="120" height="150" border="0" /><p class="text">xxxxxx</p></span></a>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</body>

</html>

Je vous remercie

Max

MathildeG

30 Aug 2019 à 11:52

Bonjour,

Ici, vous avez situé les images au sein des cellules du tableau... elles ne peuvent donc pas y être dissociées. Où voulez-vous afficher l'image ? A côté du tableau ?

valmax

1 Sep 2019 à 21:03

Bonjour Mathilde

Oui c'est bien cela à droite du tableau

Je te remercie
Bonne soirée

Max

MathildeG

2 Sep 2019 à 09:24

Bonjour,

Comme j'ai pu le dire au-dessus, en d'autres termes, il faut sortir les images du tableau dans un premier temps, sinon, elles continueront d’apparaître ainsi.
Ensuite, il vous faudra certainement un peu de Javascript pour cela

Sujet clos

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

Afficher une image au survol sur un texte