WinFuture-Forum.de: Bild im Bild "verlinken" - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

Bild im Bild "verlinken"

#1 Mitglied ist offline   WinFutAl10 

  • Gruppe: Moderation
  • Beiträge: 2.924
  • Beigetreten: 01. Juni 10
  • Reputation: 231

geschrieben 18. Juni 2011 - 19:37

Hallo,

ich hätte da mal eine Frage an euch:
Ist es irgendwie möglich, dass wenn ich auf einen bestimmten Bereich innerhalb eines Bildes klicke, in diesem Bereich dann ein anderes Bild erscheint?

WinFutAl10
0

Anzeige

#2 Mitglied ist offline   Wiesel 

  • Gruppe: Supermoderation
  • Beiträge: 4.482
  • Beigetreten: 09. Mai 06
  • Reputation: 297

geschrieben 18. Juni 2011 - 19:54

Meinst Du in einer Webseite? Da ist das möglich mit MouseOver und den entsprechenden Koordinaten.

Einfach so ein Bild nehmen und da eins drüber legen ist mir nicht bekannt. Ich frage nur weil Du im Forum Design und Deskmodding schreibst.

greets
Vernünftig sind meist nur die, die es sich leisten können unvernünftig zu sein.
0

#3 Mitglied ist offline   WinFutAl10 

  • Gruppe: Moderation
  • Beiträge: 2.924
  • Beigetreten: 01. Juni 10
  • Reputation: 231

geschrieben 18. Juni 2011 - 20:21

Ja, es wäre auch für eine Webseite. Aber ich dachte, dass sich das vielleicht auch über eine GIF-Datei machen ließe? Wenn nicht, wie kann ich das dann per MouseOver machen? Gibt es dafür vielleicht ein Howto oder eine Anleitung?
0

#4 Mitglied ist offline   Wiesel 

  • Gruppe: Supermoderation
  • Beiträge: 4.482
  • Beigetreten: 09. Mai 06
  • Reputation: 297

geschrieben 18. Juni 2011 - 20:31

http://www.prototypejs.org/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
<!--
function showPosition(evt)
{
	xy = getEventOffsetXY( evt );
	document.getElementById("myDiv").innerHTML="x: "+xy[0]+" / y: "+xy[1];
 
};
 
function ooclick(evt,width,height){
	var w = width;
	var h = height; 
	xy = getEventOffsetXY( evt );
	document.Form.elements['zwei'].value=Math.round(xy[0]
/w*15*100)/100;	
	document.Form.elements['eins'].value=Math.round(xy[1]
/h*10*100)/100;
}
 
function getEventOffsetXY( evt )
{
	if (evt.offsetX != null)
		return [ evt.offsetX , evt.offsetY ];
		
	var obj = evt.target || evt.srcElement;
	setPageTopLeft( obj );
	return [ ( evt.clientX - obj.pageLeft ) , ( evt.clientY - obj.pageTop ) ];
};
 
function setPageTopLeft( o )
{
	var top = 0,
	left = 0,
	obj = o;
 
	while ( o.offsetParent )
	 {
		 left += o.offsetLeft;
		 top += o.offsetTop;
		 o = o.offsetParent;
	};
 
	obj.pageTop = top;
	obj.pageLeft = left;
 
};
 
function clearInfo( evt )
{
	document.getElementById( "myDiv" ).innerHTML = "";
}
-->
</script>
 
<style type="text/css">
* { padding: 0px; margin: 0px }
</style>
</head>
 
<body>
<br>
<script language="javascript">
var width=640;
var height=480;
</script>
<div align="center"><img id="myImage" hspace="0" vspace="0" onmousemove="showPosition(event)" src="bild.jpg" height="480" width="640" border="1" onmouseout="clearInfo(event)" onClick="java script:ooclick(event,width,height);"></div>
 
<div align="center" id="myDiv" style="width:400px; height:100px;"></div>
<form action="#" method="post" name="Form" >	
		X Koordinate: <input size="100" type="text" name="zwei" value="1">  
		Y Koordinate: <input size="100" type="text" name="eins" value="1" id="info"> <br />		
</form>
</body>
</html>


müsste passen.

Quelle: Tutorials.de

greets
Vernünftig sind meist nur die, die es sich leisten können unvernünftig zu sein.
0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0