Как добавить описание под фото при наведении мыши? (Фотогалерея)

Question

Как добавить описание под фото при наведении мыши? (Фотогалерея)

0

Я делаю простую фотогалерею, и в настоящее время, когда пользователь нависает над миниатюрами, под ней показано увеличенное изображение.

Я также хотел бы, чтобы, когда пользователь просматривает миниатюру, я хотел бы, чтобы какой-то текст отображался внутри белого текстового поля. У каждого миниатюры должно быть другое описание. Мне нужна помощь JavaScript-кода, поскольку я не знаком с j-запросом.

Вот мой код, спасибо!

<!DOCTYPE html>

<head>
<title>Gallery</title>

<style type="text/css">
body {

margin-top: 100px;
}


input {
    height: 40px;
    word-wrap: break-word;
}


.thumbnails img {
height: 100px;
border: 4px solid #151515;
padding: 1px;
margin: 0 10px 10px 0;
margin-top: 40px;
}


.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}

.preview img {
border: 4px solid #151515;
padding: 1px;
width: 800px;
}


a:hover + input {
    display: block;
}


</style>

</head>
<body>

<body bgcolor="#CCCCCC">


<form name="bgcolorForm" > 
<select onChange="if(this.selectedIndex!=0)
document.bgColor=this.options[this.selectedIndex].value">
<option value="choose">Set background color &nbsp; &nbsp;
<option value="c8e4f8">Blue
<option value="CCCCCC">Grey
<option value="FFFFFF">White
<option value="FBFBEF">Cream
</select>
</form>


<br>
  <form id="font_form">
 <select id ="font" onChange="setFont()">
<option value="choose">Set font style 
     <option style="font-family: 'Verdana'">Verdana</option>
     <option style="font-family: Arial">Arial</option>
     <option style="font-family: 'Times New Roman'">Times New Roman</option>
  </select> 
  </form>



<div class="preview" align="center">
    <img id="preview" src="http://i60.tinypic.com/2qjj62b.jpg" alt="No Image Loaded"/>
</div>
</br>
</div>


&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; 

<input style="width:800px" id="Text" type="text" float="right" value="Text"/>


<div class="gallery" align="center">


<div class="thumbnails">
    <img onmouseover="preview.src=img1.src" id="img1" src="http://i60.tinypic.com/2qjj62b.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img2.src" id="img2" src="http://i60.tinypic.com/mb4c21.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img3.src" id="img3" src="http://i61.tinypic.com/35avvpw.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img4.src" id="img4" src="http://i60.tinypic.com/29qnjme.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img5.src" id="img5" src="http://i62.tinypic.com/zkmvd2.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img6.src" id="img6" src="http://i61.tinypic.com/oqezus.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img7.src" id="img7" src="http://i57.tinypic.com/1tx6oj.jpg" alt="Image Not Loaded"/>  
    <img onmouseover="preview.src=img8.src" id="img8" src="http://i58.tinypic.com/143onsj.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img9.src" id="img9" src="http://i61.tinypic.com/2l16qf.jpg"  alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img0.src" id="img0" src="http://i61.tinypic.com/21l0own.jpg"  alt="Image Not Loaded"/>


</div></br>

<script type="text/javascript">
var images = document.getElementsByClassName('thumbnails')[0].getElementsByTagName('img');
for (i = 0; i < images.length; i++) {
    images[i].onmouseover = function () {
        document.getElementById('preview').src = this.src;
    }
}


function setFont()
{
    var selectFont = document.getElementById("font");
    if (selectFont) {
        var selectFontValue = selectFont.options[selectFont.selectedIndex].value;
        if (selectFontValue == "Verdana") {
            document.getElementById("Text").style.font = "20px Verdana, sans-serif";
        }
        else if (selectFontValue == "Arial") {
            document.getElementById("Text").style.font = "20px Arial,sans-serif";
        }
        else if (selectFontValue == "Times New Roman") {
            document.getElementById("Text").style.font = "20px Times New Roman,serif";
        }
        else {
            document.getElementById("Verdana").style.font = "20px Verdana, sans-serif";
        }
    }
}
</script>


</body>
</html>

user3449976 23 март 2014, в 08:35

Источник

2

Для всех тат код, jsfiddle.net с было бы здорово ..
T J 23 март 2014, в 07:39
0

Я боюсь, что функция setFont () не будет работать, как вы хотите, так как вы должны иметь уникальные идентификаторы ...
sinisake 23 март 2014, в 12:01

Теги:

javascript

html

css

1 ответ

Ещё вопросы

Для всех тат код, jsfiddle.net с было бы здорово ..
Я боюсь, что функция setFont () не будет работать, как вы хотите, так как вы должны иметь уникальные идентификаторы ...

G-Cyr · Answer 1 · 2014-03-23T09-07-00.000Z

Вы должны использовать атрибуты данных и, как правило, это то, как он может работать:

<img src="http://lorempixel.com/100/100/nature/6" 
     data-full="http://lorempixel.com/300/300/nature/6"
     data-small="http://lorempixel.com/100/100/nature/6"
     onmouseover="this.src=this.getAttribute('data-full');"
     onmouseout="this.src=this.getAttribute('data-small')"
     />

http://codepen.io/anon/pen/nubmo/