Ciao a tutti.
Avrei bisogno di avere un elenco (testo) dove, al passaggio del mouse, appare in un box predefinito un'immagine collegata. In poche parole il classico: "Change Image with Link Hover".
Avevo intenzione di usare un modulo per fare ciò e poi richiamarlo in un articolo con {loadmoduleposition}. Come "generatore" di moduli vuoti uso "Joomla 1.6 HTML Module"
Quello che ho provato a fare è qui:
<head>
<script language="JavaScript" type="text/JavaScript">
function showT(q){
document.getElementById('ima').setAttribute('src','0'+q+'.png')
}
</script>
</head>
<body>
<table width="100%" border="0">
<tr>
<td width="80%"><p><a href="#" onmouseover="showT(0)">• Image 1</a></p>
<p><a href="#" onmouseover="showT(1)">Image 2</a></p>
<p><a href="#" onmouseover="showT(2)">Image 3</a></p>
<p><a href="#" onmouseover="showT(3)">Image 4</a></p>
<td width="20%"><img id="ima" src="images/00.png" width="150" height="150">
</td>
</tr>
</table>
</body>
e anche con questo:
<style type="text/css">
body {
padding: 1em;
cursor: default;
}
#gallery {
oveflow: auto;
text-align: center;
padding: 1em;
padding-top: 120px;
position: relative;
}
#gallery td {
display: inline;
padding: 0 1em;
}
#gallery img {
display: none;
position: absolute;
top: 10px;
left: 35%;
}
#gallery td:hover {
background: yellow;
}
#gallery td:hover ~ img {
display: block;
}
</style>
<table width="428" border="0" cellspacing="0" cellpadding="0" id="gallery">
<tr>
<td width="240">Text 1<img src="/images/01.png"></td>
<td width="182" rowspan="6"> </td>
</tr>
<tr>
<td>Text 2 <img src="/images/02.png"></td>
</tr>
<tr>
<td>Text 3 <img src="/images/03.png"></td>
</tr>
<tr>
<td>Text 4<img src="/images/04.png">
</td>
</tr>
</table>Ma il risultato...non va...idee?
Mi piacerebbe anche che il testo venisse evidenziato al passaggio del mouse e che il tutto non sia cliccabile...troppe pretese?
Confido nella vostra esperienza...vi ringrazio anticipatamente
