Page accueil accès plusieurs sites
Bonjour à tous,
Voici l'objectif que je me suis fixé.
Ma page html contient les liens pour accéder à plusieurs sites web.
J'ai placé un tableau dans le code html (2 lignes 4 colonnes). Les cellules de la 2ième ligne (bas) sont fusionnées. J'ai introduit un iframe dans celle-ci. Cet iframe doit afficher un texte contenu dans une autre page html "menutxt.html". Dans cette page 4 ancres sont positionnées.
Chaque cellule de la 1ère ligne du tableau (4) contient une image.
Je dois créer 2 évènements :
1 - survol (onMouseover) d'une image provoquant l'affichage du paragraphe correspondant du texte dans l'frame
2 - Clic sur une image ouvre une page html dans un nouvel onglet.
Je dois modifier mon script initial qui fonctionne bien mais qui ne correspond pas par celui défini ci-dessus.
Quelqu'un peut-il m'aider
Cordialement
Voici mon code actuel :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Loisirs créatifs</title>
<link href="css/menu.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="content">
<div style="position: relative; top: 410px; left: 500px; width: 300px; height: 200px;">
<table width="300" align="center">
<tr>
<td width="62" height="75" align="center" valign="middle" scope="col"><a href="txt/menutxt.html#a1" target="txt"><img src="img/cadr1.png" alt="" width="62" height="75"></a></td>
<td width="68" height="75" align="center" valign="middle" scope="col"><a href="txt/menutxt.html#a2" target="txt"><img src="img/pot1.png" alt="" width="62" height="75"></a></td>
<td width="62" height="75" align="center" valign="middle" scope="col"><a href="txt/menutxt.html#a3" target="txt" ><img src="img/art1.png" alt="" width="62" height="75"></a></td>
<td width="92" height="75" align="center" valign="middle" scope="col"><a href="txt/menutxt.html#a4" target="txt"><img src="img/cart1.png" alt="" width="92" height="75" ></a></td>
</tr>
<tr>
<td height="210" colspan="4" align="left" valign="top"><iframe align="top" height="210" width="300" frameborder="0" name="txt" scrolling="no" ></iframe></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
Voici l'objectif que je me suis fixé.
Ma page html contient les liens pour accéder à plusieurs sites web.
J'ai placé un tableau dans le code html (2 lignes 4 colonnes). Les cellules de la 2ième ligne (bas) sont fusionnées. J'ai introduit un iframe dans celle-ci. Cet iframe doit afficher un texte contenu dans une autre page html "menutxt.html". Dans cette page 4 ancres sont positionnées.
Chaque cellule de la 1ère ligne du tableau (4) contient une image.
Je dois créer 2 évènements :
1 - survol (onMouseover) d'une image provoquant l'affichage du paragraphe correspondant du texte dans l'frame
2 - Clic sur une image ouvre une page html dans un nouvel onglet.
Je dois modifier mon script initial qui fonctionne bien mais qui ne correspond pas par celui défini ci-dessus.
Quelqu'un peut-il m'aider
Cordialement
Voici mon code actuel :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Loisirs créatifs</title>
<link href="css/menu.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="content">
<div style="position: relative; top: 410px; left: 500px; width: 300px; height: 200px;">
<table width="300" align="center">
<tr>
<td width="62" height="75" align="center" valign="middle" scope="col"><a href="txt/menutxt.html#a1" target="txt"><img src="img/cadr1.png" alt="" width="62" height="75"></a></td>
<td width="68" height="75" align="center" valign="middle" scope="col"><a href="txt/menutxt.html#a2" target="txt"><img src="img/pot1.png" alt="" width="62" height="75"></a></td>
<td width="62" height="75" align="center" valign="middle" scope="col"><a href="txt/menutxt.html#a3" target="txt" ><img src="img/art1.png" alt="" width="62" height="75"></a></td>
<td width="92" height="75" align="center" valign="middle" scope="col"><a href="txt/menutxt.html#a4" target="txt"><img src="img/cart1.png" alt="" width="92" height="75" ></a></td>
</tr>
<tr>
<td height="210" colspan="4" align="left" valign="top"><iframe align="top" height="210" width="300" frameborder="0" name="txt" scrolling="no" ></iframe></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
5 réponses
-
je dirais :
Pour le OnMouseOver :
(a mettre dans les balises <a> )
OnMouseOver="document.getElementbyid('TestIframe').src='tonlien';"
et rajouter id="TestIframe" dans la balise iframe
Pour le OnClick:
(a mettre dans les balises <a> )
OnClick="window.open('tonlien');" -
Bonjour,
Merci pour ta prompte réponse.
Je vais testé la modification.
Cordialement -
Bonjour,
Mes tentatives de modification du script sont infructueuses.
Je n'ai pas réussi à intégrer les deux évènements dans le script.
L'utilisation de Javascript implique peut-être une déclaration dans l'entête de la page ?
Voici la partie que j'ai modifié et qui fonctionne :
<td width="62" height="75" align="center" valign="middle" scope="col"><a href="lartsencadre.fr/index.html" OnClick='return !window.open(this.href);' ><img src="img/cadr1.png" alt="" width="62" height="75"></a></td>
Mais comment compléter par onMouseOver !
Cordialement -
Arf, désolé, c'est ma faute, c'est getElementById et non getElementbyid
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Loisirs créatifs</title> <link href="css/menu.css" rel="stylesheet" type="text/css"> </head> <body> <div class="container"> <div class="content"> <div style="position: relative; top: 410px; left: 500px; width: 300px; height: 200px;"> <table width="300" align="center" border="1px"> <tr> <td width="62" height="75" align="center" valign="middle" scope="col"><a href="#" OnClick="window.open('http://www.google.fr');" OnMouseOver="document.getElementById('TestIframe').src='http://www.google.fr';" ><img src="img/cadr1.png" alt="" width="62" height="75"></a></td> <td width="62" height="75" align="center" valign="middle" scope="col"><a href="#" OnClick="window.open('http://lartsencadre.fr/index.html');" OnMouseOver="document.getElementById('TestIframe').src='http://lartsencadre.fr/index.html';" ><img src="img/cadr1.png" alt="" width="62" height="75"></a></td> <td width="62" height="75" align="center" valign="middle" scope="col"><a href="#" OnClick="window.open('http://lartsencadre.fr/index.html');" OnMouseOver="document.getElementById('TestIframe').src='http://lartsencadre.fr/index.html';" ><img src="img/cadr1.png" alt="" width="62" height="75"></a></td> <td width="62" height="75" align="center" valign="middle" scope="col"><a href="#" OnClick="window.open('http://lartsencadre.fr/index.html');" OnMouseOver="document.getElementById('TestIframe').src='http://lartsencadre.fr/index.html';" ><img src="img/cadr1.png" alt="" width="62" height="75"></a></td> </tr> <tr> <td height="210" colspan="4" align="left" valign="top"><iframe id="TestIframe" src="" align="top" height="210" width="300" frameborder="0" name="txt" scrolling="no" ></iframe></td> </tr> </table> </div> </div> </div> </body> </html> -
Bonjour,
Merci pour cette mise à jour.
C'est comme je le souhaitais.
Cordialement
