Решение проблем связанных с созданием веб сайтов на языках разметки гипертекстов css, html.

5,392 Просмотров

Всплывающая картинка при наведени курсора на какой либо элемент (текст, картинка и т.д..)

Всплывающая картинка при наведени курсора на какой либо элемент (текст, картинка и т.д..)

Всем привет!
Совсем недавно наткнулся на один из форумов посвящённых языкам гипертекстовой разметки и увидел такую вот темку:

Парень спросил можно ли сделать следующее:
цитата с форума

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

Я нашёл как это делать но с спользованем скрипта написанном на 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 на место текста вставте картинку.. вот и всё - если будут какие нить вопросы или поправки, то отписывайтесь в этой теме…..

Оставить отзыв

Вы должны войти, чтобы оставлять комментарии.