Есть ли способ запрограммировать изображение Mouseover, которое управляет 2 DIV [большим изображением и текстовым описанием
-
18-09-2019 - |
Вопрос
Дизайн требует галереи изображений с миниатюрами для разных символов, а когда вы переворачивают миниатюру, появляется большая версия изображения, а также в Div слева с заголовком и описанием для каждого символа также появляется.
1) Есть ли способ контроля над пролонгом оба DOV? (увеличенное изображение и описание)
а также
2) Как мне нужно синхронизировать это с CMS?
Спасибо за чтение :)
Решение
Попробуйте это для начала, не уверен, какой CMS вы используете и т. Д., Так что NFI, как ответить на эту часть:
HTML:
<a class="info" href="" onclick="return false;">
<img src="thumb.jpg"/>
<span><img src="large.jpg" /><br />
description goes here</span>
</a>
CSS:
a.info {z-index:24; position:relative; color:#999; font-size:11px; text-transform:none; font-weight:normal; text-decoration:none; border:1px solid #999; padding-left:3px; padding-right:3px; margin:5px;}
a.info:hover {z-index:25; text-decoration:none; color:#333; border-color:#333;}
a.info span {display:none; position:absolute; top:15px; left:15px; width:240px; color:#000; font-size:12px; background-color:#fff; padding:2px; border:1px solid #333;}
a.info:hover span {display:block;}
Другие советы
Да, храните информацию о символе в теге идентификации триггерного элемента. Как скажем, это Микки Маус, id = "Микки" Может быть, вы используете прототип ...
$$('.trigger').each(function (el) {el.observe('mouseover',showInfo.bind(el);});
Затем функция Showinfo показывает DOV, которые имеют более широкое изображение и информация
function showInfo(ev) {
// this refers to the element that has the mouse over, which has the descriptive id
var infoContainerId = this.id+"_info";
var imageContainerId = this.id+"_image";
$(infoContainerId).show(); // showing the div id="mickey_info"
$(imageContainerId).show(); // showing the div id="mickey_image"
}
Ну .. просто пример ...
Используя jQuery, это не проверено, но это было бы что -то вроде этого:
$('#myImageThumbnail').mouseenter(function(){
//Set the description text
$('#descriptionDiv').html('Insert character description here');
//Enlarge the image
$('#myImageThumbnail').attr('height','300');
$('#myImageThumbnail').attr('width','200');
});
$('#myImageThumbnail').mouseleave(function(){
//Remove the description text
$('#descriptionDiv').html('');
//Return image/thumbnail to original size
$('#myImageThumbnail').attr('height','150');
$('#myImageThumbnail').attr('width','100');
});
Если вам нужно было извлечь динамическую информацию из базы данных для описания, просто посмотрите на функцию jQuery $ .Ajax и установите описание HTML на возвращаемое значение.