Bonjour,
Voila j'ai un petit problème, et je solliciterais bien votre aide =)
Voici un aperçu que ça donne sans css ni rien d autre:
http://moogafire.atspace.eu/test1.php
Mon problème:Je désirerais que les icônes soit alignés a l'horizontal et non a la vertical, et que les div s'ouvrent juste en bas au milieu des icônes comme
http://moogafire.atspace.eu/ (image 1,2,3,4,13,14).
Voici le javascript:
<div onmouseover="affiche('ContenuB')" onmouseout="cache(event,'ContenuB')">
<img src="./icones/env.jpg">
<div id="ContenuB" style="display:none;"><div class="bubble"><FONT color="black"><b>Choisissez votre fourniseur d'email:</b></FONT></div><br/>
<a href="http://rms.orange.fr%2F' target='_blank' rel='nofollow'>http://id.orange.fr/auth_user/bin/auth0user.cgi?date=1316900701&skey=840d4695dcd715840eb822a6e804a3f5&url=http://rms.orange.fr%2F "><img src="./icones/orange.jpg"></a>
<a href="https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=11&ct=1316900839&rver=6.1.6206.0&wp=MBI&wreply=http:%2F%2Fmail.live.com%2Fdefault.aspx&lc=1036&id=64855&mkt=fr-FR&cbcxt=mai&snsc=1 "><img src="./icones/msn.jpg"></a>
<a href="https://imp.free.fr/ "><img src="./icones/free.jpg"></a>
<a href="https://mail.yahoo.com/ "><img src="./icones/ymail.jpg"></a>
<a href="https://accounts.google.com/ServiceLogin?service=mail&passive=true&rm=false&continue=https://mail.google.com/mail/&ss=1&scc=1<mpl=default<mplcache=2&emr=1&osid=1 "><img src="./icones/gmail.jpg"></a>
</div> </div>
</div>
<div onmouseover="affiche('ContenuD')" onmouseout="cache(event,'ContenuD')">
<img src="./icones/tchat.jpg">
<div id="ContenuD" style="display:none;"><div class="bubble"><FONT color="black"><b>Choisissez votre reseau social:</b></FONT></div><br/>
<a href="https://myspace.com/ "><img src="./icones/myspace.jpg"></a>
<a href="https://twitter.com/ "><img src="./icones/twitter.jpg"></a>
<a href="https://www.facebook.com/ "><img src="./icones/facebook.jpg"></a>
</div></div>
</div>
<div onmouseover="affiche('ContenuC')" onmouseout="cache(event,'ContenuC')">
<img src="./icones/video.jpg">
<div id="ContenuC" style="display: none;border: 0px solid black";>
<br/><div class="bubble"><FONT color="black"><b>Choisissez votre site de videos:</b></FONT></div><br/>
<a href="https://www.youtube.com/ "><img src="./icones/youtube.jpg"></a>
<a href="https://www.dailymotion.com/fr "><img src="./icones/dailymotion.jpg"></a>
</div>
</div></div>
<div onmouseover="affiche('ContenuE')" onmouseout="cache(event,'ContenuE')">
<img src="./icones/mus.jpg">
<div id="ContenuE" style="display: none;border: 0px solid black";>
<br/><div class="bubble"><FONT color="black"><b>Choisissez votre site de musique:</b></FONT></div><br/>
<a href="http://grooveshark.com/"><img src="./icones/groov.jpg"></a>
<a href="https://www.deezer.com/fr/ "><img src="./icones/deezer.jpg"></a>
</div>
</div></div>
<div onmouseover="affiche('ContenuF')" onmouseout="cache(event,'ContenuF')">
<img src="./icones/tra.jpg">
<div id="ContenuF" style="display: none;border: 0px solid black";>
<br/><div class="bubble"><FONT color="black"><b>Choisissez votre site de traduction:</b></FONT></div><br/>
<a href="https://www.reverso.net/text_translation.aspx?lang=FR "><img src="./icones/rev.jpg"></a>
<a href="https://translate.google.com/ "><img src="./icones/gt.jpg"></a>
</div>
</div></div>
<div onmouseover="affiche('ContenuA')" onmouseout="cache(event,'ContenuA')">
<img src="./icones/reg.jpg">
<div id="ContenuA" style="display:none; border:none; margin: auto; padding: auto; ">
<br/><div class="bubble"><FONT color="black"><b>Veuillez cliquer sur le fond que vous désirez :</b></FONT></div><br/>
<?php
$i = 0;
$dir=opendir("background/");
while($file = readdir($dir)){
if(!in_array($file,array(".",".."))){
if((preg_match("/~/", $file)==false) && (preg_match("/.jpg/", $file)==true))
{
$i++;
?>
<a href='?fond=<?php echo $file;?>'>
<img style='width:200px;height:150px;' src='background/mini/mini_<?php echo $file; ?>' />
</a>
<?php
}
}
}
?>
</div>
<div id="bg">
<table cellspacing="0" cellpadding="0" >
<tr>
<td>
<img src="./background/<?php echo $fond; ?>">
</td>
</tr>
</table>
</div>
<script type="text/javascript">
function affiche(id) {
document.getElementById(id).style.display = '';
}
function cache(e,id) {
var relTarg = e.relatedTarget || e.toElement;
if(!isChildOf(relTarg,document.getElementById('conteneur'))) {
document.getElementById(id).style.display = 'none';
}
}
function isChildOf(child,par) {
while(child!=document) {
if(child==par) { return true; }
child = child.parentNode;
}
return false;
}
</script>
Je vous remercie d'avance de votre aide,
Darox.
Afficher la suite