въпрос за наслояване в html

22 август 200818 г.

Здравейте!

Как мога да направя картинка,като при посочване с мишката, до нея да се появява друга,която да е върху другите елементи на страницата,а не да ги измества?

Мъчих се с z-index но не ми се получава.

24 август 200818 г.

Здравейте!
Как мога да направя картинка,като при посочване с мишката, до нея да се появява друга,която да е върху другите елементи на страницата,а не да ги измества?
Мъчих се с z-index но не ми се получава.

Мога да ти предложа решение. За целта следвай последователността:

1. Във файла, където ще вградим насочващата снимка, някъде между таговете <head> и </head> поставяме:

2. Между таговете <body> и </body> задаваме функцията на скрипта и посочваме местоположението на снимките /в случая при поставяне курсора на мишката върху снимката survivor-top.jpg , до нея ще се позиционира по-голямата снимка survivor-header.jpg/ :

- И двете снимки са поставени в папка "images".

3. Също между таговете <body> и </body> някъде в края, поставяме следния код:

</div></div></div>

4. Създаваме "preview.js" , чиято структура е следната:

var offsetfrommouse=[15,15]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset

var displayduration=1; //duration in seconds image should remain visible. 0 for always.

var currentimageheight = 369; // maximum image size.

var t_id = 0;

var currentimagewidth = 429; // maximum image size.

var timer;

var pos=0;

var dir=2;

var len=0;

function getSize() {

var myWidth = 0, myHeight = 0;

if( typeof( window.innerWidth ) == 'number' ) {

myWidth = window.innerWidth; myHeight = window.innerHeight;

} else if( document.documentElement && ( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {

myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight;

} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {

myWidth = document.body.clientWidth; myHeight = document.body.clientHeight;

}

return [myWidth,myHeight];

}

function getScrollXY() {

var scrOfX = 0, scrOfY = 0;

if( typeof( window.pageYOffset ) == 'number' ) {

scrOfY = window.pageYOffset; scrOfX = window.pageXOffset;

} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {

scrOfY = document.body.scrollTop; scrOfX = document.body.scrollLeft;

} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {

scrOfY = document.documentElement.scrollTop; scrOfX = document.documentElement.scrollLeft;

}

return[scrOfX,scrOfY];

}

function gettrailobj(){

if (document.getElementById)

return document.getElementById("preview_div").style

else if (document.all)

return document.all.trailimagid.style

}

function gettrailobjnostyle(){

if (document.getElementById)

return document.getElementById("preview_div")

else if (document.all)

return document.all.trailimagid

}

function truebody(){

return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}

function hidetrail(){

gettrailobj().display= "none";

document.onmousemove=""

gettrailobj().left="-500px"

clearTimeout(timer);

}

function showtrail(imagename,title,showthumb){

i = imagename

t = title

s = showthumb

timer = setTimeout("show('"+i+"',t,s);",200);

}

function show(imagename,title,showthumb){

document.onmousemove=followmouse;

t_id = setInterval(animate,20);

newHTML = '<div class="border_preview"><div id="loader_container"><div id="loader" style="position:relative;"><div align="center">Loading image preview...</div><div id="loader_bg"><div id="progress"> </div></div></div></div>';

newHTML = newHTML + '<h2 class="Heading2" align="center">' + title + '</h2>'

if (showthumb > 0){

newHTML = newHTML + '<div align="center" style="padding: 8px 10px 17px 10px;"><img onload="java script:remove_loading();" src="' + imagename + '" border="0"></div>';

newHTML = newHTML + '</div>';

framewidth = currentimagewidth+33;

if ((navigator.userAgent.indexOf("Firefox")==-1) && (navigator.userAgent.indexOf("Opera")==-1) ) { newHTML = newHTML+'<iframe src="about:blank" scrolling="no" frameborder="0" width="'+framewidth+'" height="'+currentimageheight+'"></iframe>';}

var obj_id = gettrailobjnostyle()

obj_id.innerHTML = newHTML;

gettrailobj().display="block";

}

function followmouse(e){

var xcoord=offsetfrommouse[0]

var ycoord=offsetfrommouse[1]

var windowWidth = getSize()[0];

var windowHeight = getSize()[1];

var windowScrollX = getScrollXY()[0];

var windowScrollY = getScrollXY()[1];

var browserSpecOffset = 0;

ycoord = windowScrollY+(windowHeight-currentimageheight) / 2;

if ((typeof e != "undefined") && (navigator.userAgent.indexOf("Opera")==-1)) {

xcoord += e.pageX;

browserSpecOffset = 50;

}

if ((typeof window.event != "undefined") && (navigator.userAgent.indexOf("Opera")==-1)){

xcoord += event.clientX;

browserSpecOffset = 30;

}

if (navigator.userAgent.indexOf("Opera")!=-1) {

xcoord += window.event.clientX;

browserSpecOffset = 50;

}

if (xcoord+currentimagewidth+browserSpecOffset>windowWidth) {

xcoord += currentimagewidth-windowWidth;

}

if (xcoord<0) {

xcoord += browserSpecOffset+offsetfrommouse[0];

}

gettrailobj().left = xcoord+"px";

gettrailobj().top = ycoord+"px";

}

function animate()

{

var elem = document.getElementById('progress');

if(elem != null) {

if (pos==0) len += dir;

if (len>32 || pos>79) pos += dir;

if (pos>79) len -= dir;

if (pos>79 && len==0) pos=0;

elem.style.left = pos;

elem.style.width = len;

}

function remove_loading() {

this.clearInterval(t_id);

var targelem = document.getElementById('loader_container');

targelem.style.display='none';

targelem.style.visibility='hidden';

//var t_id = setInterval(animate,60);

}

5. Ето цялата структура на файла, където ще поставим ефекта със снимката:

<html>

<head>

<title>Ефект със снимка</title>

</head>

<body>

<div id="progress"><div align="center">Loading...

</div></div></div>

</body>

</html>

6. Превю

Редактирано 24 август 200818 г. от sashkolin (преглед на промените)

24 август 200818 г.

Автор

Мерси за изчерпателния отговоp

Но на мен ми трябваше само position:relative; (но нещо не се сетих).

Добре дошли!

въпрос за наслояване в html

Featured Replies

Регистрирайте се или влезете в профила си за да коментирате

Разглеждащи това в момента 0

Дарение

Бюлетин

Профил

Навигация

Търсене

Конфигуриране на push известия в браузъра

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)