[Карбид Вольфрама]

Добрых выходных уважаемые...

Есть бегущщие картинки в виде обычного слайдшоу, при наведении картинка останавливается и имеет присвоенную ссылку. Хотелось бы что бы при наведении курсора картинка не просто останавливалась и становилась кликабельной, а еще и выделялась рамочкой или слегка высветлялась.
Вот код работающей бегущщей строки с картинками

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_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_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 минут

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

[Макс-Текс]

Чтобы картинка выделялась рамкой, нужно добавить такой CSS код к документу:

a:hover img {
border: #ff0000 5px solid;
}

[Niemans]

a:hover img {
border: #ff0000 5px solid;
}

Нужно учесть еще тот факт, что при таком варианте, при наведении картинки буду "скакать".

[Макс-Текс]

Да, конечно скачут. Но это проблемы создателя темы.
Нельзя же все за него делать

Добавлено через 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 работает.

[Карбид Вольфрама]

Добавляю

a:hover img {
border: #ff0000 5px solid;
}

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

[Макс-Текс]

Выложил примеры:
http://www.dobry-dom.ru/teststr2.html - с рамкой и даже картинки не скачут
http://www.dobry-dom.ru/teststr.html - с высветлением (заменой картинки)

Карбид Вольфрама, там же можете посмотреть исходный код.

[Карбид Вольфрама]

Макс-Текс, спасибо большое разобрался

[kost]

В следующий раз ищите на помойках более современные скрипты. Это -- древний ужас.