1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
|
<html>
<head>
<style>
table tr td {border:solid 1px;border-color:#BE3F00}
.impair {background-color:#E84D00;color:#F7D590;font-weight:bold;}
</style>
</head>
<body>
<div align="center">
<div style="width: 100%;" align="center">
<table style="text-align: center; border-spacing: 0px;" 0="" cellpadding="0">
<tr class="impair">
<td>
<select onchange="descriptifChange('desc');" id="selectBoutique">
<option value="0"></option>
<option onmouseout="descriptifOption('desc', 'out', 'option1')" onmouseover="descriptifOption('desc', 'over', 'option1')" value="1">boutique 1</option>
<option onmouseout="descriptifOption('desc', 'out', 'option2')" onmouseover="descriptifOption('desc', 'over', 'option2')" value="2">boutique 2</option>
<option onmouseout="descriptifOption('desc', 'out', 'option3')" onmouseover="descriptifOption('desc', 'over', 'option3')" value="3">boutique 3</option>
<option onmouseout="descriptifOption('desc', 'out', 'option4')" onmouseover="descriptifOption('desc', 'over', 'option4')" value="4">boutique 4</option>
<option onmouseout="descriptifOption('desc', 'out', 'option5')" onmouseover="descriptifOption('desc', 'over', 'option5')" value="5">boutique 5</option>
</select></td>
<td width="250">
<div id="desc">mon descriptif</div>
<div id="option0" style="display: none;"> </div>
<div id="option1" style="display: none;">mon montexte11</div>
<div id="option2" style="display: none;">mon montexte22</div>
<div id="option3" style="display: none;">mon montexte33</div>
<div id="option4" style="display: none;">mon montexte44</div>
<div id="option5" style="display: none;">mon montexte55 sdf sdf sdf sd fsd f sdf sd fsd fsdz y gh fh tey ety</div>
</td>
</tr>
</table>
<script language="javascript">
function descriptifOption(id, display, text){
document.getElementById(id).innerHTML = document.getElementById(text).innerHTML;
if (display == "over") {
document.getElementById(id).display = "none";
} else {
document.getElementById(id).display = "block";
}
}
function descriptifChange(id){
var optionValue = "option"+document.getElementById("selectBoutique").value;
document.getElementById(id).innerHTML = document.getElementById(optionValue).innerHTML;
}
</script>
</div>
</div>
</body>
</html> |
Partager