Forum de discussion
Forum « Programmation HTML » (archives)
Re: Images dans menus déroulants impossible
Envoyé: 29 septembre 2003, 13h14 par Oznog
C'est impossible. La seule solution est de simuler un menu déroulant. Dans une table avec de belle bordure donnant l'effet d'une liste de sélection.
En DHTML tu peux mettre ce "simili-menu déroulant" dans un calque invisible. Qu'il suffit de rendre visible pour afficher le menu.
Exemple (voir la série de tutoriels suivant http://www.trucsweb.com/DHTML/trucs.asp?no=279&type=2) :
<html>
<head>
<style>
.monObjet {
position: absolute;
top: 50;
left: 50;
visibility: hidden;
}
</style>
<title>Test de propriété "Visible/invisible"</title>
<script type="text/javascript" language="javascript">
<!--
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
function twAffiche_Cache(nObjet) {
if(ie4) { // Internet explorer
eval(nObjet).style.visibility =
(eval(nObjet).style.visibility=='visible'?'hidden':'visible');
}
else if(ns4) { // Netscape 4.x
document.eval(nObjet).visibility =
(document.eval(nObjet).visibility=='show'?'hidden':'show');
}
else if(ns6) { // Netscape 6 (mozilla)
var divns6 = document.getElementsByTagName("div")
divns6[nObjet].style.visibility =
(divns6[nObjet].style.visibility=='visible'?'hidden':'visible');
}
}
// -->
</script>
</head>
<body>
<div class="monObjet" id="monObjet">
<h4>mon DIV</h4>
<p>Je peux avoir des <a href="">hyperlien</a></p>
<p>Des paragraphe, des images <img src="http://www.trucsweb.com/img/t_tut4.gif"; alt="des images" ></p>
<p>Ou tout HTML/CSS</p>
<p><b>Alors pourquoi pas un menu!</b></p>
</div>
<a href="#" onMouseOver="twAffiche_Cache('monObjet')" onMouseOut="twAffiche_Cache('monObjet')">Lien</a>
</body>
</html>
Ciao
Oznog
Réponses
|
![[Photo]](https://www.trucsweb.com/documents/images/2024/js-bs-formulaire-fetch.png)
Formulaire Bootstrap 5 Ajax avec validation.![[Photo]](https://www.trucsweb.com/documents/images/2023/elephants-Salvador_Dali_1948.jpg)
Sécuriser l’accès « bureau à distance » sous IIS![[Photo]](https://www.trucsweb.com/documents/images/2023/trou_noir_galaxie_M87.jpg)
L’AI au temps du Far-Web![[Photo]](https://www.trucsweb.com/documents/images/2023/gilles-villeneuve-montreal1978.jpg)
Sélecteurs JavaScript querySelector() et querySelectorAll()![[Photo]](http://www.trucsweb.com/documents/images/2023/evolution_de_lhomme.jpg)
CSS - Animations![[Photo]](http://www.trucsweb.com/documents/images/2023/univers-copernic.jpg)
Mode de couleurs (Color modes) Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/2023/les_burgers_de_papa.jpg)
25 ans des Trucsweb - Bouton hamburger animé Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/logos/l_whatwg.svg)
Living Standard pour HTML de Apple, Google, Mozilla, Microsoft ...et la W3C![[Photo]](http://www.trucsweb.com/documents/images/2022/tim-berners-lee-web-b.jpg)
Le nouveau HTML « Living Standard » et le XML![[Photo]](http://www.trucsweb.com/documents/images/2022/v_jacques_dutronc-les_cactus.jpg)
Sécuriser un formulaire de contact au Far-Web!
AbuseIPDB
Connexion![http://www.trucsweb.com/img/t_tut4.gif"](http://www.trucsweb.com/img/t_tut4.gif"){kind=link}