-1

ハイパーリンク画像とその下のテキストを含むサムネイルを作成しています。マウスホバーで div コンテンツを表示する必要があります。CSS が苦手なため、これまでのところマウスホバーは正常に機能しています。スパンを使用して画像の下のテキストを取得できません。ページの右側にある「SEE MORE stories」の下にある www.ge.com の参照も参照してください。これを自分の Web サイトで複製したいので、助けてください。

                <a href="" class="nav-holder-link">
                <img width="67" height="51" class="nav-header-image" src="images/img1.jpg" alt="" />
                <span class="nav-holder-text">moving</span>
                <div class="nav-holder-preview">
                    <img width="305" height="100" src="images/img1.jpg" alt="" />
                    <p style="position:absolute;top:55px;padding-left:10px;padding-right:10px">Powered by GE locomotives, the Juice Train is bringing Orange Juice to your breakfast table in one of the most efficient ways possible.</p>
                </div>
                </a>

                <a href="" class="nav-holder-link">
                <img width="67" height="51" class="nav-header-image" src="images/img2.jpg" alt=""/>
                <span class="nav-holder-text">Watch</span>
                <div class="nav-holder-preview">
                    <img width="305" height="100" src="images/img2.jpg" alt="" />
                    <p style="position:absolute;top:55px;padding-left:10px;padding-right:10px">Watch this time lapse as the Tropicana/CSX Juice Train, powered by two 4,400 HP GE </p>
                </div>
                </a>
4

2 に答える 2

0

非表示の各 div 内にリンクを配置できます...次の行に沿って何か...

<div style="width: 25%; float: left;">
  <a hef="link-to-somepage.aspx">
    <img width="67" height="51" class="nav-header-image" src="images/img2.jpg" alt="" onmouseover="ToggleInformationOn(4)" onmouseout="ToggleInformationOff()" /><br />
        <span class="nav-holder-text" onmouseover="ToggleInformationOn(1)" onmouseout="ToggleInformationOff()">Football</span>
  </a>
</div>
于 2013-01-06T12:40:58.523 に答える
0

こんな感じですか？？？

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/vbscript">
' <!--
Function ToggleInformationOn(Id)
    if Id = 1 then
        ToggleInformationOff()
        window.document.getElementById("info4image1").style.display = "block"
    elseif Id = 2 then
        ToggleInformationOff()
        window.document.getElementById("info4image2").style.display = "block"
    elseif Id = 3 then
        ToggleInformationOff()
        window.document.getElementById("info4image3").style.display = "block"
    elseif Id = 4 then
        ToggleInformationOff()
        window.document.getElementById("info4image4").style.display = "block"
    end if
End Function

Function ToggleInformationOff()
    window.document.getElementById("info4image1").style.display = "none"
    window.document.getElementById("info4image2").style.display = "none"
    window.document.getElementById("info4image3").style.display = "none"
    window.document.getElementById("info4image4").style.display = "none"
End Function
' -->
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
    <div style="width: 305px;">
        <div style="width: 25%; float: left;">
            <img width="67" height="51" class="nav-header-image" src="images/img1.jpg" alt="" onmouseover="ToggleInformationOn(1)" onmouseout="ToggleInformationOff()" /><br />
            <span class="nav-holder-text" onmouseover="ToggleInformationOn(1)" onmouseout="ToggleInformationOff()">moving</span>
        </div>
        <div style="width: 25%; float: left;">
            <img width="67" height="51" class="nav-header-image" src="images/img2.jpg" alt="" onmouseover="ToggleInformationOn(2)" onmouseout="ToggleInformationOff()" /><br />
            <span class="nav-holder-text" onmouseover="ToggleInformationOn(1)" onmouseout="ToggleInformationOff()">Watch</span>
        </div>
        <div style="width: 25%; float: left;">
            <img width="67" height="51" class="nav-header-image" src="images/img1.jpg" alt="" onmouseover="ToggleInformationOn(3)" onmouseout="ToggleInformationOff()" /><br />
            <span class="nav-holder-text" onmouseover="ToggleInformationOn(1)" onmouseout="ToggleInformationOff()">Charley</span>
        </div>
        <div style="width: 25%; float: left;">
            <img width="67" height="51" class="nav-header-image" src="images/img2.jpg" alt="" onmouseover="ToggleInformationOn(4)" onmouseout="ToggleInformationOff()" /><br />
            <span class="nav-holder-text" onmouseover="ToggleInformationOn(1)" onmouseout="ToggleInformationOff()">Football</span>
        </div>
    </div>
    <div id="info4image1" class="nav-holder-preview"  style="position: absolute; width: 305px; top: 75px; padding-left: 10px; padding-right: 10px; display: none;">
        <img width="305" height="100" src="images/img1.jpg" alt="" />
        <p style="width: 305px">Powered by GE locomotives, the Juice Train is bringing Orange Juice to your breakfast table in one of the most efficient ways possible.</p>
    </div>
    <div id="info4image2" class="nav-holder-preview"  style="position: absolute; width: 305px; top: 75px; padding-left: 10px; padding-right: 10px; display: none;">
        <img width="305" height="100" src="images/img2.jpg" alt="" />
        <p style="width: 305px">Watch this time lapse as the Tropicana/CSX Juice Train, powered by two 4,400 HP GE </p>
    </div>
    <div id="info4image3" class="nav-holder-preview"  style="position: absolute; width: 305px; top: 75px; padding-left: 10px; padding-right: 10px; display: none;">
        <img width="305" height="100" src="images/img1.jpg" alt="" />
        <p style="width: 305px">Powered by willy wonka's choclate factory, blah blah blah.</p>
    </div>
    <div id="info4image4" class="nav-holder-preview"  style="position: absolute; width: 305px; top: 75px; padding-left: 10px; padding-right: 10px; display: none;">
        <img width="305" height="100" src="images/img2.jpg" alt="" />
        <p style="width: 305px">Watch manchester united play football then have a beer and think about how nice life is when you support a superb football team</p>
    </div>
</div>
</form>
</body>
</html>
于 2013-01-06T04:03:47.980 に答える