Hilfe
Neues Thema
Antworten
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
Seite 1 von 1
Bild im Bild "verlinken"
#1
WinFutAl10 
- Gruppe: Moderation
- Beiträge: 2.993
- Beigetreten: 01. Juni 10
- Reputation: 235
- Geschlecht:Männlich
geschrieben 18. Juni 2011 - 19:37
Nach oben
#2
Wiesel
- Gruppe: aktive Mitglieder
- Beiträge: 6.004
- Beigetreten: 09. Mai 06
- Reputation: 525
- Geschlecht:unbekannt
- Wohnort:Punxsutawney, 742 Evergreen Terrace
- Interessen:Mein Schneckenhaus
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
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
around the world
#3
WinFutAl10
- Gruppe: Moderation
- Beiträge: 2.993
- Beigetreten: 01. Juni 10
- Reputation: 235
- Geschlecht:Männlich
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?
#4
Wiesel
- Gruppe: aktive Mitglieder
- Beiträge: 6.004
- Beigetreten: 09. Mai 06
- Reputation: 525
- Geschlecht:unbekannt
- Wohnort:Punxsutawney, 742 Evergreen Terrace
- Interessen:Mein Schneckenhaus
geschrieben 18. Juni 2011 - 20:31
http://www.prototypejs.org/
müsste passen.
Quelle: Tutorials.de
greets
<!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
around the world
Thema verteilen:
Seite 1 von 1
