✔ Vorschaubild OnMouseOver Bild zentriert über dem Bildschirm

J

Joe

Erfahrenes Mitglied
Hallo Tutorials,
habe folgenden Code zum anzeigen eines Screenshots gemacht:
HTML: 
<img src="screens/mapklein.PNG" alt="Bild" id="Test" border="1"
 onmouseover="this.src = 'screens/mapgross.PNG';"
 onmouseout="this.src = 'screens/mapklein.PNG';">

Allerdings schiebt sich das Bild auf Grund seiner Grösse nach unten und nach rechts.
Zu sehen hier: http://end-time.de/screenshots.php
Kann man das irgendwie mittig über den Bildschirm bekommen oder habt ihr andere Ideen?

Vielen Dank fürs lesen und helfen.
Gruss Joe.
 
So vielleicht:

HTML: 
<script language="javascript" type="text/javascript">
function show(art) {
	if (art == 1) {
		document.getElementById("big").style.display="block";
	} else if (art == 0) {
		document.getElementById("big").style.display="none";
	}
}
</script>

<style type="text/css">
body	{	margin: 0px;
		}

#big	{	position: absolute;
			left: 50%;
			top: 50%;
			width: 200px;
			height: 200px;
			margin-left: -100px;
			margin-top: -100px;
		}
  </style>

 </head>
<body>

<img src="k.jpg" alt="Klein" id="small" onmouseover="show(1);" onmouseout="show(0);">
<img id="big" style="display: none;" src="g.jpg" alt="Gross">
 
  • Gefällt mir
Reaktionen: Joe
Jap super allerdings hab ich da noch 3 Fragen.

1.:
2Bilder werden nicht nebeneinander gezeigt sondern untereinander. Der Platz im Div reicht bei meinen Vorschaubildern für je 2 Pics nebeneinander. Wie macht man das? (Code unten).

2.:
Wenn das Vorschaubild und das vergrösserte übereinander liegen schaltet der Code immer wieder OnMouseOut und direckt wieder OnMouseOver. Das führt dann zum dauernden hin und herschalten (flackern).

3.:
Position Absolute. Das dürfte dann je nach Bilschirmauflösung immer ne andre Position haben Oder? Kann mans auch am Wrapper festmachen also Position 30% Left from wrapper?

Danke fürs helfen bin schon froh wenn mir eine Frage beantwortet werden kann :)

Der Code:
HTML: 
 <script language="javascript" type="text/javascript">
function show(art) {
	if (art == 1) {
		document.getElementById("big").style.display="block";
	} if (art == 0) {
		document.getElementById("big").style.display="none";
	} if (art == 2) {
		document.getElementById("big2").style.display="block";
	} if (art == 3) {
		document.getElementById("big2").style.display="none";
	}
	
	
}
</script>

<style type="text/css">
body	{	margin: 0px;
		}

#big	{	position: absolute;
			left: 30%;
			top: 30%;
			width: 500px;
			height: 400px;
			
		}
#big2	{	position: absolute;
			left: 30%;
			top: 30%;
			width: 500px;
			height: 400px;
			
		}
  </style>

 </head>
<body>

<img src="screens/mapklein.PNG" alt="Klein" id="small" onmouseover="show(1);" onmouseout="show(0);">
<img id="big" style="display: none;" src="screens/mapmidddle.PNG" alt="Gross">
<img src="screens/charakterklein.PNG" alt="Klein" id="small" onmouseover="show(2);" onmouseout="show(3);">
<img id="big2" style="display: none;" src="screens/charaktermidddle.PNG" alt="Gross">
 
Zuletzt bearbeitet:
1.ens hat sich erledigt img sind inline elemente und paltzieren sich automatisch nebeneinander. Meine Pics waren lediglich 2Pixel zu gross :)
 
Bei dem folgenden Code wurde das so verändert das sowohl die Art (ein-/ausblenden) und auch die ID des Bildes an die JavaScript Funktion übergeben werden.

HTML: 
<script language="javascript" type="text/javascript">
function show(art, id) {

	if (art == 1) {
		document.getElementById("big" + id).style.display="block";
	} else if (art == 0) {
		document.getElementById("big" + id).style.display="none";
	}

}
</script>

<style type="text/css">
body    {
            margin: 0px;
		}

.big     {
            position: absolute;
			left: 0px;
			top: 0px;
			width: 400px;
			height: 400px;
			z-index: 1;

		}
.small  {
            position: relative;
            z-index: 0;
        }
  </style>

 </head>
<body>
<div style="border-style: solid; border-width: thin; width: 150px; height: 500px;">
<img class="small" id="small1" src="k.jpg" alt="Klein1" onmouseover="show(1, 1);">
<img class="big" id="big1" style="display: none;" src="g.jpg" alt="Gross1" onmouseout="show(0, 1);">
<img class="small" id="small2" src="k.jog" alt="Klein2" onmouseover="show(1, 2);">
<img class="big" id="big2" style="display: none;" src="g.jpg" alt="Gross2" onmouseout="show(0, 2);">
</div>

Die Größenangaben bei den CSS Angaben sind jetzt nur mal so "geraten" und müssen von dir noch angepasst werden.

Die Positionsangaben können von dir nach belieben verändert werden wobei du ursprünglich ja wolltest das die großen Bilder mittig auf dem Bildschirm eingeblendet werden!

Am Rahmen ist zu erkennen das beim Einblenden der großen Bilder dieser nicht verändert wird.
 
Zuletzt bearbeitet:
  • Gefällt mir
Reaktionen: Joe
Super erklärt hab das bei mir direckt übernommen und angepasst.

Ja es sollte eigentlich mittig sein, aber wie so oft und gerade beim proggen kann sich das beim testen schnell mal ändern. Also hab ichs versucht es per Position absolute etwa ins Contentausgabediv zu verschieben. Freilich sinnfrei da man ja nicht weiss wie die Auflösung des Users ist. Das ganze Bild vergrössern Bilder normal zeigen wird bei andren Auflösungen schnell unhandlich. Unhandlich weil man erst umständlich mit dem Mauszeiger zum vergrösserten Bild fahren muss und wieder raus um es zu schliessen. Ist wenig intuitiv.

Tja daher denke ich muss ich nach einen anderen Weg suchen. Etwa OnClick -> grosses Bild zeigen mit CloseButton und oder OnClick -> schliesse grosses Bild.

Finde es abe echt nett wenn User wie du andren helfen und letztenendes hilft es ja nicht nur mir sondern jedem der grad nach sowas sucht. Und Lernen tut man auch was :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück