- 18, May 2024
- #1
У меня есть следующий код для галереи, которую я ввожу на наш сайт:
Код (разметка): для большего изображения, которое появляется при наведении курсора мыши, есть ли способ показать некоторый текст, который зависит от соответствующего изображения (т. е. текст для img1 будет отличаться от текста для img2), и я хочу, чтобы это быть показано под увеличенным изображением.
Пожалуйста, примите во внимание, что я новичок в этом, поэтому буду признателен за пошаговые инструкции.
<!DOCTYPE html PUBLIC>
<html>
<head>
<title>Meet the team</title>
<style type="text/css">
body {
background: #222;
color: #eee;
margin-top: 20px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
a {
color: #FFF;
}
a:hover {
color: yellow;
text-decoration: underline;
}
.thumbnails img {
height: 80px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}
.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}
.preview img {
border: 4px solid #444;
padding: 1px;
width: 400px;
}
</style>
</head>
<body>
<div class="gallery" align="center">
<h2>Meet the team</h2>
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" name="img1" src="images/img1.jpg" alt=""/>
<img onmouseover="preview.src=img2.src" name="img2" src="images/img2.jpg" alt=""/>
<img onmouseover="preview.src=img3.src" name="img3" src="images/img3.jpg" alt=""/>
<img onmouseover="preview.src=img4.src" name="img4" src="images/img4.jpg" alt=""/>
</div><br/>
<div class="preview" align="center">
<img name="preview" src="images/img1.jpg" alt=""/>
</div>
</div>
</body>
</html>Код (разметка): для большего изображения, которое появляется при наведении курсора мыши, есть ли способ показать некоторый текст, который зависит от соответствующего изображения (т. е. текст для img1 будет отличаться от текста для img2), и я хочу, чтобы это быть показано под увеличенным изображением.
Пожалуйста, примите во внимание, что я новичок в этом, поэтому буду признателен за пошаговые инструкции.
![[Виктория Волевач] Всегда молода](/assets/images/icons/forum2.png){kind=icon}
![[Фишка] Кач для 90+](/assets/images/icons/forum6.png){kind=icon}