Всплывающая картинка при наведени курсора на какой либо элемент (текст, картинка и т.д..)
Всплывающая картинка при наведени курсора на какой либо элемент (текст, картинка и т.д..)
Всем привет!
Совсем недавно наткнулся на один из форумов посвящённых языкам гипертекстовой разметки и увидел такую вот темку:Парень спросил можно ли сделать следующее:
цитата с форумаМного раз встречал такие прикольные фички - при наведении курсора мыши на текст или маленькую картнку, справа или с любой другой стороны появлялась таже самая картинка в горазда больших размерах..
Я нашёл как это делать но с спользованем скрипта написанном на JavaScript…
А можно это сделать с помощью Css ?????
На том форуме пока, что никто так и не ответил, хотя ответ прост - конечно можно, но это будет сделать куда лудчше средствами JavaScript..
Вот пример: Нажми чтобы просмотреть.
Вот код:
Это Css:
<style type=”text/css”>
#pic {
position: relative;
background-color: #FFFFFF;
left: 50px;
top: 50px;
width: 100%;
}#pic a .large {
position: absolute;
border: 0px;
display: block;
height: 1px;
left: -1px;
top: -1px;
width: 1px;
}#pic a.p1:hover .large {
position: relative;
border: 1px solid #000000;
display: block;
left: 70px;
_left: 110px;
top: 30px;
width: 100px;
height: 100px;
}#pic a.p1:hover {
background-color: white;
}
</style>Это Html:
<div id=”pic”>
<a class=”p1″ href=”#”>Наведите на меня мышинный курсор<img src=”openquote.gif” class=”large” /></a>
</div>А для того, чтобы сделать вместо текста картинку, то просто между div на место текста вставте картинку.. вот и всё - если будут какие нить вопросы или поправки, то отписывайтесь в этой теме…..
Оставить отзыв
Вы должны войти, чтобы оставлять комментарии.