2
ギャラリー内の別の画像をクリックすると、イメージとイメージの下のテキストを交換するにはどうすればよいですか？HTML/CSS/JS - クリック時の画像とテキストの変更方法
クリックしたときに拡大画像にスワップする4つのサムネイル画像を希望し、拡大された画像のそれぞれに異なる説明を表示します。私は、イメージをスワップすることができましたが、テキスト部分でどこから始めるのか分かりません。
また、イメージの下のイメージとテキストの両方を変更するためにクリックすることができる各イメージの横にタイトル/リンクがあります。
コードは以下であり、このJSfiddleリンクで：https://jsfiddle.net/hzjk077t/
HTML
<html>
<head>
<title> Locations </title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="image_swap.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<div id="branding">
<img src="Images/logo.png">
</div><!-- end of "logo" -->
<div id="tagline">
<p> Welcome to yourday.com - We hope you enjoy your visit! </p>
</div><!-- end of "tagline" -->
</div><!-- end of "header" -->
<div id="bodycontent2">
<div id="Thumbnails">
<p>Below, we have a selection of vintage locations across Ireland and some information regarding each.
</br>Please take note of the location of your preference, and <a href="mailto:[email protected]">contact us</a> to to set up an appointment.
<p>Select an image to enlarge it</p>
<ul class="Thumbnails">
<li><a href="slideshow/img1.jpg" title="location1"><img src="thumbnails/location1.jpg" alt="location1" /></a></li>
<li><a href="slideshow/img2.jpg" title="location2"><img src="thumbnails/location2.jpg" alt="location2" /></a></li>
<li><a href="slideshow/img3.jpg" title="location3"><img src="thumbnails/location3.jpg" alt="location3" /></a></li>
<li><a href="slideshow/img4.jpg" title="location4"><img src="thumbnails/location4.jpg" alt="location4" /></a></li>
</ul>
</div><!--end of thumbnail div -->
<div id="main-image">
<img src="slideshow/img1.jpg" alt="Enlarged Image" id="the_image" />
</div><!--end of main image div-->
</div><!--end of body content" -->
<div id="navigation">
<ul class="topnav" id="TopNav">
<li><a href="home.html">Home</a></li>
<li><a href="locations.html">Locations</a></li>
<li><a href="booking.html">Booking</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="about.html">About</a></li>
</li>
</ul>
</div> <!--end of "navigation" -->
<div id="footer">
<p>Created by: Calvin Leong</p>
<p>Contact information: <a href="mailto:[email protected]">[email protected]</a></p>
</div>
</body>
</html>
CSS
body {
font-family: Verdana, Helvetic, Arial, sans-serif;
font-size: 16px;
background-color: #C8A2C8;
line-height: 125%
}
/*Map - where we are*/
h1{
position:absolute;
top: 450px;
}
#map{
position:absolute;
top:500px;
}
h2{
font-family: "Times New Roman", Times, serif;
font-size: 32px;
font-weight: italic;
}
#navigation a{
text-decoration: none;
}
.highlight {
color: #339999;
font-family: Georgia, Times, serif;
font-style:italic:
}
#navigation {
position: absolute;
left: 0;
top: 150px;
width: 100%
}
#bodycontent {
position: absolute;
top: 620px;
width: 100%
}
#tagline {
position: absolute;
top: 200px;
}
#bodycontent2 {
position: absolute;
top: 250px;
width: 100%
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #FFB6C1;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #D3D3D3;}
/*Keeps footer at the bottom, no matter what size window*/
html{
position:relative;
min-height: 100%;
}
#footer{
position: absolute;
bottom: 0;
top: 1000px;
width: 100%;
height: 2px;
margin: 0 auto;
border-top: 2px solid #f2f2f2;
border-width: 0 0 100% 0;
border-color: gray;
}
/*Gallery settings*/
.galleryphoto {
font-size: 65%;
font-weight: bold;
margin-top: 0;
width: 430px;
line-height: 1.4em;
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid navy;
margin-bottom: 10px;
}
#main-image {
margin: 0.2em 0 0 22em;
}
#thumbnails p {
font-size: 80%;
}
#thumbnails ul {
list-style-type: none;
}
#thumbnails li {
display: block;
padding: 5% 0 0 0;
}
#thumbnails {
width: 16em;
border-right: maroon;
border-width: 0 3px 0 3px;
border-style: dotted solid double;
padding: 0 1.5%;
float: left;
height: 31.5em;
}
#thumbnails a img {
border-style: none;
border-width: 0;
border-color: transparent;
}
JS
function swap_image() {
var my_image = this.href;
var the_image = document.getElementById("the_image");
the_image.src = my_image;
return false;
}
function attach_handlers() {
var div = document.getElementById("Thumbnails");
var links = div.getElementsByTagName("a");
for (var i=0; i < links.length; ++i)
links[i].onclick = swap_image;
}
window.onload = attach_handlers;
こんにちは、ありがとうございました。だから、4つの画像については、 "image1text"を画像2などに変更するだけで、画像2と画像2のテキストに変更されます。また、別の画像を選択した場合、前のテキストを消して新しいテキストに置き換えることは可能ですか？ –
はい、そうです。それをやりたければ、$（ "＃imagetext1"）.html（ ''）を実行してください。これは、現在のテキストを何も置き換えません。これが正しい場合は、将来の視聴者に正しい答えとしてマークしてください。 –
ありがとうございます。私はそこでそれをやろうとしましたが、拡大した画像の下に画像のテキストを表示していません。各サムネイル画像の下にのみ表示されます。 [link]（https://jsfiddle.net/0fk2sn28/） –