Клуб PhotoImpact

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Клуб PhotoImpact » HTML, Script, Java Script, CSS для вебмастерая. » Всплывающая подсказка с графикой при наведении курсора.

Всплывающая подсказка с графикой при наведении курсора.

Страница: 1

Сообщений 1 страница 5 из 5

1

  • Автор: Anatolij
  • Anatolij
  • Откуда: Германия
  • Зарегистрирован: 21-12-2007
  • Приглашений: 2
  • Сообщений: 3060
  • Уважение: [+153/-0]
  • Пол: Мужской
  • Провел на форуме:
    2 месяца 25 дней
  • Последний визит:
    11-12-2023 23:58:01

Всплывающая подсказка с графикой при наведении курсора.

Хочу предложить ещё один интересный скриптик позволяющий при наведении на ссылочку не только прочесть текстовую подсказку но и помещать в подсказке изображения. Я применил этот скриптик в информационном табло "Купи-продай". Теперь посетитель может наведя курсор на название предлогаемого продукта не только прочесть информацию о нём но и увидеть предлогаемый товар.
Использовать этот скрипт можно и в других целях. К примеру, в ответах на часто задаваемые вопросы. Сам вопрос как линк, при наведении курсора на который всплывёт не только текстовая информация но и скриншот показывающий где именно находится тот или другой инструмент.

Это код скрипта.
Стили указывающие координаты для подсказки поместим в  HTML - верх.

Код:
<!--- Мощная всплывающая подсказка.--->
<style type="text/css">
#text2 {HEIGHT: 80px; LEFT: 0px; POSITION: absolute; TOP: 50px; VISIBILITY: hidden; WIDTH: 250px; Z-INDEX: 10}
</style>
<!---Ende--->

Для указания размеров и вида окна а так же его содержимого, размещение кода особого значания не имеет, хотя принято ставить его в "тело" документа между тегами  <body> и </body>. В форумах это HTML - низ.

Код:
<!--- Мощная всплывающая подсказка.--->
<table align="left" id="text2" border="1" width="100%" cellspacing="0" cellpadding="5" style="HEIGHT: 250px; LEFT:350px; TOP: 200px; WIDTH: 300px">
<tr>
<td bgcolor="#FFFFE1">
<a target="_blank" href="http://www.radikal.ru"><img src="http://s58.radikal.ru/i160/0904/a3/0d03e08add32.gif" HSPACE="40"></a>
<TH ALIGN=CENTER>
<UL>
<LI><H3>Ваш текст</H3>
</UL>
</CENTER>
</td>
</tr>
</table>
<!---Ende--->

А этот скриптик в HTML- низ.

Код:
<!--- Мощная всплывающая подсказка.--->
<script language="JavaScript">
if (parseInt(navigator.appVersion)>= 4)
{
if (navigator.appName == "Netscape")
{
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}
else
{
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
}
}
function show(layerName)
{
if (parseInt(navigator.appVersion)>= 4)
{
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
}
}
function cls(layerName){
if (parseInt(navigator.appVersion)>= 4) 
{
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
}
}
</script>
<!---Ende--->

Текст, ссылку на картинку а так же размеры и дизайн самого окна вы можете поменять на свои, сообразуясь с дизайном вашего ресурса.

0

2

  • Автор: Anatolij
  • Anatolij
  • Откуда: Германия
  • Зарегистрирован: 21-12-2007
  • Приглашений: 2
  • Сообщений: 3060
  • Уважение: [+153/-0]
  • Пол: Мужской
  • Провел на форуме:
    2 месяца 25 дней
  • Последний визит:
    11-12-2023 23:58:01

Этот код взят с ресурса http://www.scriptic.ru/ Рекомендую ознакомиться с ресурсом. Очень много полезного  для оформления страничек.
Представленый код интересный в познавательных целях но загружать на страничку не рекомендую. Сам эффект посредственный а на на код странички лишняя нагрузка. Обычно при навидении на ссылку не елозят курсором по ней и эффект останется не замеченым и не оцененым. Я думаю, если уж решил оформить подсказку то выдели саму подсказку. Представленый ниже код позволяет "тянуться" подсказке за курсором вдоль ссылки.

Код:
<html>
<head>
<title>Подвижная подсказка.</title>
<script>
//detecting mouse objects
var ns=(document.layers)
var ie=(document.all)
//capturing events
if (ns){document.captureEvents(Event.MOUSEMOVE)}
document.onmousemove = mouseMove
//x,y cordinates
function mouseMove(el) {
	if (ns) {x=el.pageX; y=el.pageY;TheLength=document.layers.length}
	if (ie) {x=event.x; y=event.y;TheLength=document.all.length}
	
for (i=1; i<TheLength; i++) {
	if (ns) {whichEl = document.layers[i];var whichMove=whichEl}
	if (ie) {whichEl = document.all[i];whichMove=document.all[i].style}
	if (whichEl.id.indexOf("child")!= -1) {
whichMove.left=x+5
whichMove.top=y+3
} } }
//show the layer when mouseover
function sign(el,c) {
if (ns){
	document.layers["child"+c].visibility="show";
	}else{
	document.all["child"+c].style.visibility="visible";
	}
document.onmousemove = mouseMove
}
//hide the layer when mouseout
function hide(c) {
	if (ns){
	document.layers["child"+c].visibility="hide";
	}else{
	document.all["child"+c].style.visibility="hidden";
	}
	//release event when hiding layer
	if (ns){releaseEvents(Event.MOUSEMOVE)}
	document.onmousemove=""
}
</script> 
</head>
<body>
<div id="Parent1"><a href="http://script.ru/index.htm" onmouseover="sign('parent1',1)" onmouseout="hide(1)">Script.ru<br></a></div> 
<div id="parent2"><a href="http://script.ru/javascript.htm" onmouseover="sign('parent2',2)" onmouseout="hide(2)">JavaScript<br></a></div> 
<div id="parent3"><a href="http://script.ru/forma.htm" onmouseover="sign('parent3',3)" onmouseout="hide(3)">Контакты<br></a></div> 
<div id="child1" style="position:absolute;background-color:#006600;visibility:hidden">Scriptic. - JavaScript - HTML - CSS...</div> 
<div id="child2" style="position:absolute;background-color:#006600;visibility:hidden">Коллекция JavaScript скриптов</div> 
<div id="child3" style="position:absolute;background-color:#006600;visibility:hidden">info@scriptic.ru</div>
</body>
</html>

0

3

  • Автор: Эльвинг
  • Эльвинг
  • Зарегистрирован: 27-05-2009
  • Приглашений: 0
  • Сообщений: 125
  • Уважение: [+0/-0]
  • Провел на форуме:
    1 день 10 часов
  • Последний визит:
    08-12-2010 11:31:57

Скриптик.ру?
Вот блин,надо было глаза открыть.У меня этот сайт давным-давно в закладках...

0

4

  • Автор: lelik
  • lelik
  • Откуда: Украина
  • Зарегистрирован: 03-03-2009
  • Приглашений: 0
  • Сообщений: 259
  • Уважение: [+40/-0]
  • Пол: Мужской
  • Провел на форуме:
    5 дней 20 часов
  • Последний визит:
    05-04-2013 10:22:46
Эльвинг написал(а):

А я видел на некоторых сайтах,что там в рамочке описание ссылки и когда водишь по ссылке,оно двигается.А обычно в Мозилле описания не двигаются,а стоят на одном месте.Так вот,можете ли написать код подобной подсказки?! (сомневаюсь,что там обошлось простым alt="")

Называется "hint", красиво смотриться , но многие говорят - мешает индексации.... Как для меня , обычного "alt" с головой хватает :glasses:

+1

5

  • Автор: platonic
  • Участник
  • Зарегистрирован: 17-03-2020
  • Приглашений: 0
  • Сообщений: 1
  • Уважение: [+0/-0]
  • Провел на форуме:
    12 минут
  • Последний визит:
    17-03-2020 18:46:43

Блин, html раньше был сложнее)

0

Страница: 1

Вы здесь » Клуб PhotoImpact » HTML, Script, Java Script, CSS для вебмастерая. » Всплывающая подсказка с графикой при наведении курсора.

Рейтинг форумов | Создать форум бесплатно