[PILNE] otwieranie obrazka po najechaniu na tekst

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
ODPOWIEDZ
tomzi
Posty: 1
Rejestracja: śr kwie 18, 2007 3:24 pm

[PILNE] otwieranie obrazka po najechaniu na tekst

Post autor: tomzi »

Mam wielką prośbę...
otóż potrzebuje jakiegoś skryptu, kodu, czegokolwiek...

a mianowicie aby po najechaniu kursorem myszy na tekst
obok niego (kursora) wyświetliło mi sie małe okienko ( ok 150x200px) ze zdjęciem


mniej więcej coś takiego
Obrazek

Jeśli temat już był - przepraszam za dubla ale to jest bardzo pilne

Bardzo proszę o pomoc i z góry dziękuje
koziolek
Przelotem
Przelotem
Posty: 387
Rejestracja: sob paź 21, 2006 10:07 pm
Kontakt:

Re: [PILNE] otwieranie obrazka po najechaniu na tekst

Post autor: koziolek »

Hej!
kod JS:

Kod: Zaznacz cały

function getPosition(e){
	var IE = document.all?true:false
	if (IE) {
		var ov = new RegExp("MSIE (\\d+\\.\\d+);");
		if(ov.test(navigator.appVersion)){
			var version = parseFloat(RegExp["$1"]);
		}
		if(version>=7){
    		mouseX = event.clientX + document.documentElement.scrollLeft	/*documentElement w ie7 body w ie6?*/
	    	mouseY = event.clientY + document.documentElement.scrollTop
		}
		else{
			mouseX = event.clientX + document.body.scrollLeft	/*documentElement w ie7 body w ie6?*/
	    	mouseY = event.clientY + document.body.scrollTop
		}
  	}
  	else{
    	mouseX = e.pageX
    	mouseY = e.pageY
  	}
	return [mouseX, mouseY];
}
Następnie wzbogacamy nasz tekst o takie coś:
[xml]
<span onmouseover="showImg()" onmouseout="hideImg()">jakiś tam tekst</span>
[/xml]

I definiujemy odpowiednie funkcje JS:

Kod: Zaznacz cały

function showImg(){
  var img = document.getElementById("obrazek");
  mPos = getPosition(event);
  img.style.position="absolute";
  img.style.top=mPos[1]+img.height+ "px";
  img.style.left=mPos[0]+img.width+ "px";
  img.style.display="block";
}
function hideImg(){
   var img = document.getElementById("obrazek");
   img.style.display="none";
}
na koniec trzeba jeszcze zdefiniować odpowiedni css:

Kod: Zaznacz cały

#obrazek{display: none}
i wstawić obrazek o id="obrazek"
ODPOWIEDZ