• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilder vergrößern

Status
Für weitere Antworten geschlossen.
T

TT-Nord

Neues Mitglied
Bilder vergrößern

Hey Hey

,Ich hab mal eine kleine Frage, wie mus der HTML Code aussehen wenn
ich auf einer Seite ein Bild habe und dieses größer werden lassen möchte
ohne es in einem neuen Fenster aufzumachen, Sprich wenn ich mit der
Maus auf das kleine Bild gehe soll es groß werden und wenn ich vom
kleinen wieder runter gehe soll das Große Bild auch wieder verschwinden.


Für hilfe wär ich euch echt Dankbar

Harald
 
mhm ich denke das geht mit JS -
LTM;l18111, it's your turn ;)

EDIT: sowas?

Code: 
<body onload="init()">

<style type="text/css">
	#mglass {position:absolute;left:-2000;top:50;}
	#thumb {position:absolute;left:-2000;top:50;}
	#large {position:absolute;left:-2000;top:50;}
	#framegif {position:absolute;left:-2000;top:50;}

</STYLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
var isNav, isIE
var offsetX, offsetY
var selectedObj

var enlargefactor=5						// zoomfaktor x Breite und Höhe der Zoom-Grafik

var largewidth = 500						// Original-Breite der zu zoomenden Grafik
var largeheight = 523						// Original-Höhe der zu zoomenden Grafik
var largeleft = 370						// Grafikrahmen-Entfernung von links
var largetop = 230						// Grafikrahmen-Entfernung von oben

var thumbwidth = Math.floor(largewidth/enlargefactor)
var thumbheight = Math.floor(largeheight/enlargefactor)
var thumbleft = 170						// Objekt-Grafik Entfernung von links
var thumbtop = 250						// Objekt-Grafik Entfernung von oben

var mglasswidth = 46						// zoom-Grafik Breite
var mglassheight = 46						// zoom-Grafik Höhe
var mglassleft = 260						// Lupen-Grafik Entfernung von links
var mglasstop = 330						// Lupen-Grafik Entfernung von oben

var difleft= largeleft-thumbleft
var diftop= largetop-thumbtop

var clippoints

var cliptop = (thumbheight-mglassheight)*enlargefactor
var clipbottom = cliptop+(mglassheight*enlargefactor)
var clipleft =(thumbwidth-mglasswidth)*enlargefactor
var clipright = clipleft+(mglasswidth*enlargefactor)


if (parseInt(navigator.appVersion) >= 4) {
	if (navigator.appName == "Netscape") {
		isNav = true
	} else {
		isIE = true
	}
}

function setZIndex(obj, zOrder) {
	obj.zIndex = zOrder
}

function shiftTo(obj, x, y) {
	if (isNav) {
		obj.moveTo(x,y)
	} else {
		obj.pixelLeft = x
		obj.pixelTop = y
	}
	cliptop = (y-thumbtop)*enlargefactor
	clipbottom = cliptop+(mglassheight*enlargefactor)
	clipleft = (x-thumbleft)*enlargefactor
	clipright = clipleft+(mglasswidth*enlargefactor)


	if (document.all) {
		clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
		document.all.large.style.posTop=largetop-cliptop
		document.all.large.style.posLeft=largeleft-clipleft
		document.all.large.style.clip=clippoints
	}
	if (document.layers) {
		document.large.top=largetop-cliptop
		document.large.left=largeleft-clipleft
		document.large.clip.left = clipleft
		document.large.clip.right = clipright
		document.large.clip.top = cliptop
		document.large.clip.bottom = clipbottom
	}
}

function setSelectedElem(evt) {
	if (isNav) {
		var testObj
		var clickX = evt.pageX
		var clickY = evt.pageY
		for (var i = document.layers.length - 1; i >= 0; i--) {
			testObj = document.layers[i]
			if ((clickX > testObj.left) &&
				(clickX < testObj.left + testObj.clip.width) &&
				(clickY > testObj.top) &&
				(clickY < testObj.top + testObj.clip.height)) {
					selectedObj = testObj
					setZIndex(selectedObj, 100)
					return
			}
		}
	} else {
		var imgObj = window.event.srcElement
		if (imgObj.parentElement.id.indexOf("mglass") != -1) {
			selectedObj = imgObj.parentElement.style
			setZIndex(selectedObj,100)
			return
		}
	}
	selectedObj = null
	return
}

function dragIt(evt) {
	if (selectedObj) {
		if (isNav) {
	shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))
		} else {
	shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))
	return false
		}
	}
}

function engage(evt) {
	setSelectedElem(evt)
	if (selectedObj) {
		if (isNav) {
			offsetX = evt.pageX - selectedObj.left
			offsetY = evt.pageY - selectedObj.top
		} else {
			offsetX = window.event.offsetX
			offsetY = window.event.offsetY
		}
	}
	return false
}

function release(evt) {
	if (selectedObj) {
		setZIndex(selectedObj, 0)
		selectedObj = null
	}
}

function setNavEventCapture() {
	if (isNav) {
		document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
	}
}

function init() {
/////////////////Netscape Navigator/////////////
	if (document.layers) {
		document.large.left=largeleft
		document.large.top=largetop

		document.framegif.left=largeleft-4		// Grafik-Entfernung von Lupengrafik
		document.framegif.top=largetop-4		// Grafik-Entfernung von Lupengrafik

		document.thumb.left=thumbleft
		document.thumb.top=thumbtop

		document.mglass.left=mglassleft
		document.mglass.top=mglasstop

		document.large.clip.left = 0
		document.large.clip.right = 0
		document.large.clip.top = 0
		document.large.clip.bottom = 0

		setNavEventCapture()
	}

//////////////Internet Explorer//////////////
	if (document.all) {
		document.all.large.style.posLeft=largeleft
		document.all.large.style.posTop=largetop

		document.all.framegif.style.posLeft=largeleft-4	// Grafik-Entfernung von Lupengrafik
		document.all.framegif.style.posTop=largetop-4	// Grafik-Entfernung von Lupengrafik

		document.all.thumb.style.posLeft=thumbleft
		document.all.thumb.style.posTop=thumbtop

		document.all.mglass.style.posLeft=mglassleft
		document.all.mglass.style.posTop=mglasstop
		document.all.large.style.clip="rect(0 0 0 0)"
	}

	document.onmousedown = engage
	document.onmousemove = dragIt
	document.onmouseup = release
}
// -->
</SCRIPT>

<DIV ID="thumb">[img]../kykarte.jpg[/img]</DIV>
<DIV ID="framegif">[img]../magframe.gif[/img]</DIV>
<DIV ID="large">[img]../kykarte.jpg[/img]</DIV>
<DIV ID="mglass">[img]../mglass.gif[/img]</DIV>
 
Wenn der IE CSS richtig interpretieren würde... Dann ginge es nämlich auch so:
Code: 
<style type="text/css"><!--
#bild {width:40px; height:40px;}
#bild:hover {width:100px; height:100px;}
--></style>

Dann das Bild
Code: 
[img]bla.jpg[/img]
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben