Doctype et javascript
Doctype et javascript - HTML/CSS - Programmation
Marsh Posté le 12-03-2009 à 19:47:55
Mhh. Je ferais cet effet en css, parce que là tu vas devoir charger une image quand tu passes sur un élément de menu.
Tu fais une une image qui contient toutes les images et leur état hover (donc tes 8 images).
Ensuite
-tu mets du texte dans tes liens que tu cache avec un text-indent:-9000px
-tu donnes une classes à chaque lien pour lui attribuer une background-position qui correspond à son image
-tu changes cette position dans le :hover
Voilà un exemple de code : http://ultravoid.com/test-nav/
Et tu pourrais quand même employer des titres et des listes dans ton html !
Marsh Posté le 13-03-2009 à 14:15:35
| cyrius44 a écrit : Bonjour à tous, aprés plusieurs recherches sur le net je ne trouve pas la solution a mon problème (bien qu'il soit apparemment trés courant !) |
Bonjour.
1. Plutôt que mettre ton code en italique, utilise la balise [cpp] ou [code=php], merci.
2. Merci d'expliciter le "ne marche plus". Code d'erreur ? Plantage ? Autre ?
3. W3C validator => 27 erreurs.
Si tu veux (dois) faire du xhtml strict, tu n'as pas le droit à l'erreur. Commence par corriger les 27 erreurs, et on en reparle...
4. Demander de l'aide pour créer un site de Conception de sites Web, il fallait oser ! 
Marsh Posté le 15-03-2009 à 20:49:10
| macgawel a écrit : |
on peut demander de l'aide même quand on conçoit un site de conception de site web mais enfin bref, je sens bien le dérapage total pour notre cher ami
---------------
Blablaté par Harko
Sujets relatifs:
- [resolu]probleme concatenation chaine en javascript
- Accès direct aux css en javascript ?
- [Résolu] Pb onClick (javascript) sous firefox 3.0.6
- [javascript/html] fonction pour enlever une chaine dans code hTML
- Défilement images d'une requete php avec javascript
- Petit probleme javascript
- [Javascript] calcul de prix avec multiplicateur variable !!!
- [javascript/html/css] Mon site web
- probleme javascript sous DOCTYPE XHTML
- Probleme avec le Doctype et génération d'un menu JavaScript
Marsh Posté le 12-03-2009 à 18:04:24
Bonjour à tous, aprés plusieurs recherches sur le net je ne trouve pas la solution a mon problème (bien qu'il soit apparemment trés courant !)
Je fais exécuter sur ma page un petit script javascript pour changer l'image au passage de a souris :
<script language="javascript" type="text/javascript">
<!--/*--><![CDATA[//><!--
function onHome() { homeButton.src="img/design/home.on.png" }
function offHome() { homeButton.src="img/design/home.not.png" }
function onGalerie() { galerieButton.src="img/design/galerie.on.png" }
function offGalerie() { galerieButton.src="img/design/galerie.not.png" }
function onTarifs() { tarifsButton.src="img/design/tarifs.on.png" }
function offTarifs() { tarifsButton.src="img/design/tarifs.not.png" }
function onContact() { contactButton.src="img/design/contact.on.png" }
function offContact() { contactButton.src="img/design/contact.not.png" }
//--><!]]>
</script>
mais quand je rajoute le doctype du xhtml strict, le script ne marche plus ... j'ai donc du faire une erreur de syntaxe .... :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
Sinon voici le code entier de ma page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<html>
<head>
<link rel="stylesheet" href="styles/design.css" type="text/css" media="screen" />
<script language="javascript" type="text/javascript">
<!--/*--><![CDATA[//><!--
function onHome() { homeButton.src="img/design/home.on.png" }
function offHome() { homeButton.src="img/design/home.not.png" }
function onGalerie() { galerieButton.src="img/design/galerie.on.png" }
function offGalerie() { galerieButton.src="img/design/galerie.not.png" }
function onTarifs() { tarifsButton.src="img/design/tarifs.on.png" }
function offTarifs() { tarifsButton.src="img/design/tarifs.not.png" }
function onContact() { contactButton.src="img/design/contact.on.png" }
function offContact() { contactButton.src="img/design/contact.not.png" }
//--><!]]>
</script>
</head>
<body>
<div id="logo">
<img src="img/design/logo.png"></img>
</div>
<div class="menu">
<a href="index.php" onmouseOver="onHome();" onmouseOut="offHome();">
<img src="img/design/home.not.png" name="homeButton" alt="Home" border="0"></a>
<a href="#" onmouseOver="onGalerie();" onmouseOut="offGalerie();">
<img src="img/design/galerie.not.png" name="galerieButton" alt="Galerie" border="0"></a>
<a href="#" onmouseOver="onTarifs();" onmouseOut="offTarifs();">
<img src="img/design/tarifs.not.png" name="tarifsButton" alt="Tarifs" border="0"></a>
<a href="#" onmouseOver="onContact();" onmouseOut="offContact();">
<img src="img/design/contact.not.png" name="contactButton" alt="Contact" border="0"></a>
</div>
<div id="content">
<p>Bienvenue sur Pandanet:</p>
<p>Conception de sites Web:
<br></br>Nous vous proposons la création de votre site internet, en fonction de vos activités et besoins.
<br></br>Un design graphique personnalisé
<br></br>Référencement dans les meilleurs moteurs de recherche
<br></br>Hébergement, comptes de courriel et statistiques
<br></br>Service après-vente </p>
<p>Avantages :
<br></br>Votre site personnalisé vous permet d'augmenter votre visibilité face à vos concurrents.
<br></br>Un moyen promotionnel performant ! Votre site devient un prolongement de vos activités.
</p>
</div>
<div id="footer">
__
<br></br>
© 2008 Pandanet tous droits réservés
</div>
</body>
</html>
Merci beaucoup !