Добре дошли!

Добре дошли в нашите форуми, пълни с полезна информация. Имате проблем с компютъра или телефона си? Публикувайте нова тема и ще намерите решение на всичките си проблеми. Общувайте свободно и открийте безброй нови приятели.

Моля, регистрирайте се за да публикувате тема и да получите пълен достъп до всички функции.

RQ за ефекта Rollover image

Последователи

Нова тема
Отговор в тази тема

16 ноември 200619 г.

Искам да постигна този ефект и правя всичко както си е описано, но ми се появява само първата картинка и когато мина с курсора през нея не се сменя с втората

Цитирай

16 ноември 200619 г.

<html>

<!--

function MM_swapImgRestore() {

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() {

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}

}

function MM_findObj(n, d) {

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage() {

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

</head>

<body>

<div id="rollimg1" style="position:absolute; overflow:hidden; left:164px; top:280px; width:1px; height:1px; z-index:0">

<a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rollimg1','','images/v5logo1.gif',1)" href="#">

<img name="rollimg1" onLoad="MM_preloadImages('images/картинка.gif')" width=1 height=1 alt="" border=0 src="images/bg.bmp">

</a></div>

<div id="rollimg2" style="position:absolute; overflow:hidden; left:0px; top:0px; width:200px; height:150px; z-index:1">

<a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rollimg2','','images/no_pic.gif',1)" href="#">

<img name="rollimg2" onLoad="MM_preloadImages('images/картинка1.gif')" width=200 height=150 alt="" border=0 src="images/awp.gif">

</a></div>

</html>

Редактирано 16 ноември 200619 г. от BooM_amxcs (преглед на промените)

Цитирай

16 ноември 200619 г.

Има и по тънък начин:

a.css-item {

display: block;

background: url('blqblqblq.jpg');

}


a.css-item:hover {

background-position: 0 -40px;

}

Където въпросното "blqblqblq.jpg" е с височина 80 пиксела. 2-те картинки една върху друга - 40 пиксела обикновеното изображение и 40 пиксела под него изображението, което ще се появява при преминаване на мишката. А във сорса се изписва това:

<a href="линк" class="css-item"></a>

Редактирано 16 ноември 200619 г. от Vamp1r3 (преглед на промените)

Цитирай

Добавете отговор

Можете да публикувате отговор сега и да се регистрирате по-късно. Ако имате регистрация, влезте в профила си за да публикувате от него.

Публикацията ви съдържа термини, които не допускаме! Моля, редактирайте съдържанието си и премахнете подчертаните думи по-долу. Ако замените букви от думата със звездички или друго, за да заобиколите това предупреждение, профилът ви ще бъде блокиран и наказан!

Напишете отговор в тази тема...