Bilwechsel mit Mouseover

Ronn

Grünschnabel
Hallo!

Bin ziemlich neu auf diesem Gebiet.
Ich möchte mehrere kleine Bilder auf meiner HP zeigen.
Wenn ich jetzt mit der Maus auf dem entsprechenden Bild bin oder klicke soll das Bild vergrößert an einer anderen Stelle erscheinen.
Wie kann ich das realisieren?Hat jemand ein Beispiel?
MfG Ronn
 
Danke Dir.
Aber das Bild soll an einer anderen Stelle erscheinen.
Ich klicke oder bewege die Maus auf das kleine Bild und an einer anderen Stelle erscheint es größer. Wie sieht der Code an der Stelle aus?

Mfg Ronn
 
Hier mein Lösungsansatz:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--Config:
//Bildvergrößerung(nur . nicht ,):
var facInNumber=1.5;
//Posion X relativ zum Browser Fenster:
var posXNu = 170;
//Posion Y relativ zum Browser Fenster:
var posYNu =  50;
//Posion Type:
var StylePos='absolute';
//1 heist, das dass Bild nach vergrößern wieder verkleinert werden kann
//und somit in seine ursprüngliche Lage zurück versetzt werden kann
//0 enstprechend das Gegenteil
var undoIMG = 1;

function action(imageID)
	{
		var ArgID=document.getElementById(imageID);
		if(ArgID.style.position!==StylePos)
			{
				var width= ArgID.width * facInNumber;
				var height=ArgID.height * facInNumber;
				var position=StylePos;
				var posX=posXNu;
				var posY=posYNu;
				var posXY=ArgID.offsetLeft;
					posXY+="-" + ArgID.offsetTop;
				createIMG(width, height, position, posX, posY, ArgID, posXY);
			}
		else if(undoIMG!==0)
			{
				var ABSPos=ArgID.posX.split("-");
				var width=ArgID.width / facInNumber;
				var height=ArgID.height / facInNumber;
				var position='static';
				var posX=ABSPos[0];
				var posY=ABSPos[1];
				createIMG(width, height, position, posX, posY, ArgID, ArgID.posX);
			}
		
	}
function createIMG(width, height, position, posX, posY, ArgID, pos)
	{
		ArgID.posX=pos;
		ArgID.width=width;
		ArgID.height=height;
		ArgID.style.position=position;
		ArgID.style.left=posX;
		ArgID.style.top=posY;
	}

</script>
</head>

<body>
<img src="wizards.gif" width="350" height="219" id="image_1" onClick="action(this.id);"> 
</body>
</html>

In diesem Sinne
 

Neue Beiträge

Zurück