Question

所以，这是我的测试HTML页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>TEST</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
body {font-family: Papyrus;font-size:22px;color: #FFFFFF;background-color: #000000;}
.ntable {font-family: Papyrus;font-size:16px;color:#FFFFFF;width:100%;border-width: 1px;border-color: #000000;border-collapse: collapse;background-color:#000000; margin-left:20px;}
.ntabletd {font-family: Papyrus;font-size:16px;border-width: 1px;padding: 4px;border-style: solid;border-color: #000000;}
.ntablett {font-family: Papyrus;font-size:20px;border-width: 1px;padding: 8px;border-style: solid;border-color: #000000;background-color:#000000;font-weight:bold;color:white;}
.ntable td:hover {font-weight: bold;}
.ntitle {font-family: Papyrus;font-size: 24px;padding: 8px;background-color: #000000;font-weight: bold;color: white;text-align: left;text-decoration: underline;}
.ttl2 {text-align:center;font-size:20px;color:#555555;}
</style>

</head>
<body>

<table style="width: 18%" align="left" class="ntable" cellpadding="2">
    <tr>
        <th class="ntitle" style="width: 190px">Naviagtion</th>
    </tr>
    <tr id="bb">
        <td onmousedown="return false;" name="home" class="ntabletd" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/ycgxxuzcxnaf.png'" onmouseout="changer.src='http://www7.pic-upload.de/05.04.14/ycgxxuzcxnaf.png'" style="width: 300px"><a href="home.html" style="text-decoration: none; color:white">Home<span style="margin-left:46px;">|</span><span style="margin-left:10px;">Menu principal</span></a></td>
    </tr>
    <tr id="bb2">
        <td onmousedown="return false;" name="gallerie" class="ntabletd" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/lscr4s5jkoqx.png'" onmouseout="changer.src='http://www7.pic-upload.de/05.04.14/lscr4s5jkoqx.png'" style="width: 300px"><a href="gallerie.html" style="text-decoration: none; color:white">Galerien<span style="margin-left:28px;">|</span><span style="margin-left:10px;">Galeries</span></a></td>
    </tr>
    <tr id="bb3">
        <td onmousedown="return false;" name="gaestebuch" class="ntabletd" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/oi52nbegnx7.png'" onmouseout="changer.src='http://www7.pic-upload.de/05.04.14/oi52nbegnx7.png'" style="width: 300px"><a href="gaestebuch.html" style="text-decoration: none;color:white">G&auml;stebuch<span style="margin-left:11px;">|</span><span style="margin-left:10px;">Livre d'Or</span></a></td>
    </tr>
    <tr id="bb4">
        <td onmousedown="return false;" name="links" class="ntabletd" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/frttgb5tx3aa.png'" onmouseout="changer.src='http://www7.pic-upload.de/05.04.14/frttgb5tx3aa.png'" style="width: 300px"><a href="links.html" style="text-decoration: none;color:white">Links<span style="margin-left:51px;">|</span><span style="margin-left:10px;">Liens</span></a></td>
    </tr>
    <tr id="bb5">
        <td onmousedown="return false;" name="impressum" class="ntabletd" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/v355b61s29yw.png'" onmouseout="changer.src='http://www7.pic-upload.de/05.04.14/v355b61s29yw.png'" style="width: 300px"><a href="impressum.html" style="text-decoration: none;color:white">Impressum<span style="margin-left:19px;">|</span><span style="margin-left:10px;">Contact</span></a></td>
    </tr>
</table>




<table style="margin-top:100px; width: 481px" cellpadding="0" cellspacing="0" align="center"">
    <tr>
        <td style="width: 485px"><img onmousedown="return false;" alt="" height="363px" src="http://www7.pic-upload.de/05.04.14/np8rxs113nz.png" width="481" /></td>
        <td rowspan="7"><img onmousedown="return false;" alt="" height="633px" name="changer" src="http://www7.pic-upload.de/05.04.14/ycgxxuzcxnaf.png" width="363px" /></td>
    </tr>
    <tr>
        <td style="width: 485px"><a href="home.html"><img onmousedown="return false;" alt="" height="30px" src="http://www7.pic-upload.de/05.04.14/5286mnzt75n2.png" width="481px" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/ycgxxuzcxnaf.png', b.fontWeight='bold'" onmouseout="home.fontWeight='normal', changer.src='http://www7.pic-upload.de/05.04.14/ycgxxuzcxnaf.png'"/></td>
    </tr>
    <tr>
        <td style="width: 485px"><a href="gallerie.html"><img onmousedown="return false;" alt="" height="30px" src="http://www7.pic-upload.de/05.04.14/kxg6kzelggm.png" width="481px" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/lscr4s5jkoqx.png', b2.fontWeight='bold'" onmouseout="bb2.fontWeight='normal', changer.src='http://www7.pic-upload.de/05.04.14/lscr4s5jkoqx.png'"/></td>
    </tr>
    <tr>
        <td style="width: 485px"><a href="gaestebuch.html"><img onmousedown="return false;" alt="" height="30px" src="http://www7.pic-upload.de/05.04.14/z9xewd21v4u.png" width="481px" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/oi52nbegnx7.png', bb3.fontWeight='bold'" onmouseout="bb3.fontWeight='normal', changer.src='http://www7.pic-upload.de/05.04.14/oi52nbegnx7.png';"/></td>
    </tr>
    <tr>
        <td style="width: 485px"><a href="links.html"><img onmousedown="return false;" alt="" height="30px" src="http://www7.pic-upload.de/05.04.14/tcuzr5l81u2a.png" width="481px" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/frttgb5tx3aa.png', bb5.fontWeight='bold'" onmouseout="bb5.fontWeight='normal', changer.src='http://www7.pic-upload.de/05.04.14/frttgb5tx3aa.png';"/></td>
    </tr>
    <tr>
        <td style="width: 485px"><a href="impressum.html"><img onmousedown="return false;" alt="" height="30px" src="http://www7.pic-upload.de/05.04.14/yrcz87mzezjk.png" width="481px" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/v355b61s29yw.png', bb4.fontWeight='bold'" onmouseout="bb4.fontWeight='normal', changer.src='http://www7.pic-upload.de/05.04.14/v355b61s29yw.png';"/></td>
    </tr>
    <tr>
        <td style="width: 485px"><img onmousedown="return false;" alt="" height="120px" src="http://www7.pic-upload.de/05.04.14/ebr7b6nfhle.png" width="481px" /></td>
    </tr>

</body>

</html>

您可以在左侧表格中看到将文本悬停为粗体没问题。但我想要的是，你可以在右侧的图片中移动。所以，当你在第一帧＆＃34;帧＃34;文本＆＃34; Home＆＃34;变得大胆。而在第二帧＆＃34;＃34;文本＆＃34; Galierien＆＃34;变得大胆。

我现在尝试了很多东西。我可以用其他图片做无问题，但不能在这里使用这些图片。希望有人可以帮助我，我到处搜索！

哦，对不起我的英语，瑞士人。

Answer 1

您应该创建一个上述示例的工作JSFiddle。你的代码非常混乱。您还应该使用div而不是表格来表示菜单。花一些时间用CSS - 从长远来看它会得到回报。此外，尽可能使用CSS悬停效果并避免使用内联javascript。

首先，您的代码中存在一些错误。查看chrome developer工具控制台窗口（按F12）。

您的第二个表标记尚未关闭
更改者未在任何地方定义

您解决了这个问题，您的问题可能会消失。但是，请使用chrome dev工具验证或发布工作小提琴（如没有错误的那个）。

Answer 2

将菜单a标识为粗体，例如。 id="home"。然后，添加以下代码：

至onmouseover：

document.getElementById('home').style.fontWeight='bold';

至onmouseout：

document.getElementById('home').style.fontWeight='normal';

下面我附上制作＆＃34;工作的示例＆＃34; ＆＃34;家庭＆＃34;链接，休息是给你的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>TEST</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
body {font-family: Papyrus;font-size:22px;color: #FFFFFF;background-color: #000000;}
.ntable {font-family: Papyrus;font-size:16px;color:#FFFFFF;width:100%;border-width: 1px;border-color: #000000;border-collapse: collapse;background-color:#000000; margin-left:20px;}
.ntabletd {font-family: Papyrus;font-size:16px;border-width: 1px;padding: 4px;border-style: solid;border-color: #000000;}
.ntablett {font-family: Papyrus;font-size:20px;border-width: 1px;padding: 8px;border-style: solid;border-color: #000000;background-color:#000000;font-weight:bold;color:white;}
.ntable td:hover {font-weight: bold;}
.ntitle {font-family: Papyrus;font-size: 24px;padding: 8px;background-color: #000000;font-weight: bold;color: white;text-align: left;text-decoration: underline;}
.ttl2 {text-align:center;font-size:20px;color:#555555;}
</style>

</head>
<body>

<table style="width: 18%" align="left" class="ntable" cellpadding="2">
    <tr>
    <th class="ntitle" style="width: 190px">Naviagtion</th>
    </tr>
    <tr id="bb">
    <td onmousedown="return false;" name="home" class="ntabletd" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/ycgxxuzcxnaf.png'" onmouseout="changer.src='http://www7.pic-upload.de/05.04.14/ycgxxuzcxnaf.png'" style="width: 300px"><a id="home" href="home.html" style="text-decoration: none; color:white">Home<span style="margin-left:46px;">|</span><span style="margin-left:10px;">Menu principal</span></a></td>
    </tr>
    <tr id="bb2">
    <td onmousedown="return false;" name="gallerie" class="ntabletd" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/lscr4s5jkoqx.png'" onmouseout="changer.src='http://www7.pic-upload.de/05.04.14/lscr4s5jkoqx.png'" style="width: 300px"><a href="gallerie.html" style="text-decoration: none; color:white">Galerien<span style="margin-left:28px;">|</span><span style="margin-left:10px;">Galeries</span></a></td>
    </tr>
    <tr id="bb3">
    <td onmousedown="return false;" name="gaestebuch" class="ntabletd" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/oi52nbegnx7.png'" onmouseout="changer.src='http://www7.pic-upload.de/05.04.14/oi52nbegnx7.png'" style="width: 300px"><a href="gaestebuch.html" style="text-decoration: none;color:white">G&auml;stebuch<span style="margin-left:11px;">|</span><span style="margin-left:10px;">Livre d'Or</span></a></td>
    </tr>
    <tr id="bb4">
    <td onmousedown="return false;" name="links" class="ntabletd" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/frttgb5tx3aa.png'" onmouseout="changer.src='http://www7.pic-upload.de/05.04.14/frttgb5tx3aa.png'" style="width: 300px"><a href="links.html" style="text-decoration: none;color:white">Links<span style="margin-left:51px;">|</span><span style="margin-left:10px;">Liens</span></a></td>
    </tr>
    <tr id="bb5">
    <td onmousedown="return false;" name="impressum" class="ntabletd" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/v355b61s29yw.png'" onmouseout="changer.src='http://www7.pic-upload.de/05.04.14/v355b61s29yw.png'" style="width: 300px"><a href="impressum.html" style="text-decoration: none;color:white">Impressum<span style="margin-left:19px;">|</span><span style="margin-left:10px;">Contact</span></a></td>
    </tr>
</table>




<table style="margin-top:100px; width: 481px" cellpadding="0" cellspacing="0" align="center"">
    <tr>
    <td style="width: 485px"><img onmousedown="return false;" alt="" height="363px" src="http://www7.pic-upload.de/05.04.14/np8rxs113nz.png" width="481" /></td>
    <td rowspan="7"><img onmousedown="return false;" alt="" height="633px" name="changer" src="http://www7.pic-upload.de/05.04.14/ycgxxuzcxnaf.png" width="363px" /></td>
    </tr>
    <tr>
    <td style="width: 485px"><a href="home.html"><img onmousedown="return false;" alt="" height="30px" src="http://www7.pic-upload.de/05.04.14/5286mnzt75n2.png" width="481px" onmouseover="document.getElementById('home').style.fontWeight='bold'; changer.src='http://www7.pic-upload.de/05.04.14/ycgxxuzcxnaf.png', b.fontWeight='bold'" onmouseout="document.getElementById('home').style.fontWeight='normal'; home.fontWeight='normal', changer.src='http://www7.pic-upload.de/05.04.14/ycgxxuzcxnaf.png'"/></td>
    </tr>
    <tr>
    <td style="width: 485px"><a href="gallerie.html"><img onmousedown="return false;" alt="" height="30px" src="http://www7.pic-upload.de/05.04.14/kxg6kzelggm.png" width="481px" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/lscr4s5jkoqx.png', b2.fontWeight='bold'" onmouseout="bb2.fontWeight='normal', changer.src='http://www7.pic-upload.de/05.04.14/lscr4s5jkoqx.png'"/></td>
    </tr>
    <tr>
    <td style="width: 485px"><a href="gaestebuch.html"><img onmousedown="return false;" alt="" height="30px" src="http://www7.pic-upload.de/05.04.14/z9xewd21v4u.png" width="481px" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/oi52nbegnx7.png', bb3.fontWeight='bold'" onmouseout="bb3.fontWeight='normal', changer.src='http://www7.pic-upload.de/05.04.14/oi52nbegnx7.png';"/></td>
    </tr>
    <tr>
    <td style="width: 485px"><a href="links.html"><img onmousedown="return false;" alt="" height="30px" src="http://www7.pic-upload.de/05.04.14/tcuzr5l81u2a.png" width="481px" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/frttgb5tx3aa.png', bb5.fontWeight='bold'" onmouseout="bb5.fontWeight='normal', changer.src='http://www7.pic-upload.de/05.04.14/frttgb5tx3aa.png';"/></td>
    </tr>
    <tr>
    <td style="width: 485px"><a href="impressum.html"><img onmousedown="return false;" alt="" height="30px" src="http://www7.pic-upload.de/05.04.14/yrcz87mzezjk.png" width="481px" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/v355b61s29yw.png', bb4.fontWeight='bold'" onmouseout="bb4.fontWeight='normal', changer.src='http://www7.pic-upload.de/05.04.14/v355b61s29yw.png';"/></td>
    </tr>
    <tr>
    <td style="width: 485px"><img onmousedown="return false;" alt="" height="120px" src="http://www7.pic-upload.de/05.04.14/ebr7b6nfhle.png" width="481px" /></td>
    </tr>

</body>

</html>

祝你好运。

图像悬停时的HTML粗体文字

2 个答案: