Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

Помогите добавить визуализацию выделения в бегущей строке

Обсуждение темы Помогите добавить визуализацию выделения в бегущей строке в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Добрых выходных уважаемые... Есть бегущщие картинки в виде обычного слайдшоу, при наведении картинка останавливается и имеет присвоенную ссылку. Хотелось бы что бы при ...


Закрытая тема
 
Опции темы
Старый 06.09.2010, 09:52   #1
Добрых выходных уважаемые...

Есть бегущщие картинки в виде обычного слайдшоу, при наведении картинка останавливается и имеет присвоенную ссылку. Хотелось бы что бы при наведении курсора картинка не просто останавливалась и становилась кликабельной, а еще и выделялась рамочкой или слегка высветлялась.
Вот код работающей бегущщей строки с картинками
PHP код:
<script type="text/javascript">



//Specify the slider's width (in pixels)
var sliderwidth="300px"
//Specify the slider's height
var sliderheight="150px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var leftrightslide=new Array()
var 
finalslide=''
leftrightslide[0]='<a href="http://"><img src="dynamicbook1.gif" border=1></a>'
leftrightslide[1]='<a href="http://"><img src="dynamicbook2.gif" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="dynamicbook3.gif" border=1></a>'
leftrightslide[3]='<a href="http://"><img src="dynamicbook4.gif" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="dynamicbook5.gif" border=1></a>'

//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide
='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var 
actualwidth=''
var cross_slidens_slide

function fillup(){
if (
iedom){
cross_slide=document.getElementByIddocument.getElementById("test2") : document.all.test2
cross_slide2
=document.getElementByIddocument.getElementById("test3") : document.all.test3
cross_slide
.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth
=document.allcross_slide.offsetWidth document.getElementById("temp").offsetWidth
cross_slide2
.style.left=actualwidth+slideshowgap+"px"
}
else if (
document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2
=document.ns_slidemenu.document.ns_slidemenu3
ns_slide
.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2
.left=actualwidth+slideshowgap
ns_slide2
.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (
iedom){
if (
parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (
document.layers){
if (
ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}


if (
iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (
iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (
document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://>Dynamic Drive</a></font></p> 
Добавлено через 20 часов 7 минут

Ребят...хотя бы тыкните где читать про такое, простые книжки и гугл не помог

Последний раз редактировалось Карбид Вольфрама; 06.09.2010 в 09:52.. Причина: Добавлено сообщение
 
Старый 06.09.2010, 09:52
Ссылки
Старый 06.09.2010, 14:36   #2
Чтобы картинка выделялась рамкой, нужно добавить такой CSS код к документу:

Код:
a:hover img {
border: #ff0000 5px solid;
}
 
Старый 06.09.2010, 14:41   #3
Цитата:
Код:
a:hover img {
border: #ff0000 5px solid;
}
Нужно учесть еще тот факт, что при таком варианте, при наведении картинки буду "скакать".
 
Старый 06.09.2010, 15:44   #4
Да, конечно скачут. Но это проблемы создателя темы.
Нельзя же все за него делать

Добавлено через 37 минут

Чтобы картинка осветлялась, можно ее заменять при наведении курсора.
Картинки сделаны фоном.
Соответственно, картинки dynamicbook6.gif - dynamicbook10.gif - это варианты для замены существующих.
Нужно добавить такие стили к документу:

Код:
a {
display: inline-block;
}
#gif1, #gif2, #gif3, #gif4, #gif5 {
display: inline-block;
width: 300px;
height: 150px;
}
#gif1 {
background: url(/dynamicbook1.gif) no-repeat left center;
}
#gif1:hover {
background: url(/dynamicbook6.gif) no-repeat left center;
}
#gif2 {
background: url(/dynamicbook2.gif) no-repeat left center;
}
#gif2:hover {
background: url(/dynamicbook7.gif) no-repeat left center;
}
#gif3 {
background: url(/dynamicbook3.gif) no-repeat left center;
}
#gif3:hover {
background: url(/dynamicbook8.gif) no-repeat left center;
}
#gif4 {
background: url(/dynamicbook4.gif) no-repeat left center;
}
#gif4:hover {
background: url(/dynamicbook9.gif) no-repeat left center;
}
#gif5 {
background: url(/dynamicbook5.gif) no-repeat left center;
}
#gif5:hover {
background: url(/dynamicbook10.gif) no-repeat left center;
}
И в вашем коде заменить строки:

Код:
leftrightslide[0]='<a href="http://"><div id="gif1"></div></a>'
leftrightslide[1]='<a href="http://"><div id="gif2"></div></a>'
leftrightslide[2]='<a href="http://"><div id="gif3"></div></a>'
leftrightslide[3]='<a href="http://"><div id="gif4"></div></a>'
leftrightslide[4]='<a href="http://"><div id="gif5"></div></a>'
в IE7 и Opera работает.

Последний раз редактировалось Макс-Текс; 06.09.2010 в 15:44.. Причина: Добавлено сообщение
 
Старый 06.09.2010, 18:39   #5
Добавляю
Код:
a:hover img {
border: #ff0000 5px solid;
}
но вся конструкция перестает работать, даже до скакалок дело не дошло
Высветление посему пока даже не пытался реализовывать...мне бы раааааамочку
 
Старый 07.09.2010, 09:40   #6
Выложил примеры:
http://www.dobry-dom.ru/teststr2.html - с рамкой и даже картинки не скачут
http://www.dobry-dom.ru/teststr.html - с высветлением (заменой картинки)

Карбид Вольфрама, там же можете посмотреть исходный код.
 
Этот пользователь сказал спасибо Макс-Текс за это полезное сообщение:
Старый 07.09.2010, 13:19   #7
Макс-Текс, спасибо большое разобрался
 
Старый 08.09.2010, 01:23   #8
В следующий раз ищите на помойках более современные скрипты. Это -- древний ужас.
 
Старый 08.09.2010, 01:23
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите добавить пункт меню aston-m777 Технологии Flash 5 22.06.2011 10:31
Разметка «Добавить ВКонтакте» помогите sovlin HTML, CSS, JavaScript 4 09.11.2010 12:40
Помогите новичку добавить картинку в html AlexD HTML, CSS, JavaScript 20 17.01.2008 06:19
помогите добавить ссылку в Corel Draw Jujga Векторный арт 0 30.07.2007 19:41
Помогите добавить Flash баннер в баннерную сеть! d2711 Технологии Flash 7 19.04.2006 10:26


Текущее время: 10:18. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Дизайнерский форум