✔ Bilder anzeigen bei Mouseover

Ich hatte ja gehoft die Sitemap egal wo der user gerade ist überlagert einblenden zu können. Nicht an einem Festen Platz. Oder meist du das auch so mit deiner aussage?

Mmmh...dazu braucht man ja nicht das Skript für die Buttons, da reichts ja aus, wenn man die Sitemap da hinpackt, wo sie hinsoll, und dann jenachdem versteckt/anzeigt.
Zum Vergrößern anklicken....

Da ich ja so wenig wie möglich Java benutzen möchte damit auch user die kein Java aktiviert habe die Seite nutzen können hab ich mich damit noch nicht beschäftigt. Aber ich werde wohl nicht drumrum kommen mich in Java einzulesen. Oder Hast du "die Lösung" parat? :-)
Ich hatte das so gedacht das ich eine kleine Grafig von dem Sitemap Schriftzug mache. Nämlich so: Klein
Dan soll diese Grafik: Groß überlagert erscheinen. Oder kann man mit der hovern funktion nur die gleiche Grafik hovern lassen? Sorry wenn ich mich nicht so verständlich ausdrücke.

Gruß Sascha
 
Sven Mintel hat gesagt.:
Jedes Bild, bei dem dies passieren soll, muss den Namen "hovern" tragen.
Zum Vergrößern anklicken....

Da hätte ich mal eine Frage zu. Auf meiner seite http://www.Oldbunny.de ist leider nicht viel Platz daher wollte ich das Script dort auch verwenden wie im Shop, das ein kleines Bild halt beim drüber fahren als POP up in groß angezeigt wird.

Du schreibst aber immer das Bild muß den Namen Hovern tragen, wie kann ich das verstehen, kannst du mal einen quelltext posten wie es aussehen muß.


danke im voraus


Gruß

Frank
 
Hi Leutz!

Ein cooles Ding und tolle Hilfestellungen, allein dafür danke ich schon mal dafür.
Genau dieses wie bei zooplus suche ich ebenso.

Ich werde mir allerdings nicht das JavaScript von zooplus einbauen, sondern übernehme einfach mal das von Sven - herzlichen Dank auch hierfür!

Ich würde mich riesig freuen, wenn ihr mir mit einer Varation in dem Script von Sven weiterhelfen könntet.
Was ich nicht rausfinden konnte, war, wie ich die Bilder einbauen könnte.
Meine Idee war nämlich, ich habe ein kleines Bildchen, beim mouseover soll sich ein großes Bild öffnen, wie halt oben beschrieben. Jedoch mit der Variation, daß es nicht genau dieses Bild des thumbnails ist, sondern ein anderes.

Hat hier jemand eine Idee dazu
Und - ach, JavaScript bekomme ich eingebaut, ansonsten bleibt mir das irgendwie schon fremd und verstehe nicht allzuviel davon :(

Schon einmal einen herzlichsten Dank!

Greetz
Sandra
 
Das mit dem Bild Mouseover habe ich richitg umsetzen können. Jetzt würd ich gerne wissen wie dies mit einem Text funktionier, d. h. das wenn ich über einen Text fahre (mit dem Mauszeiger versteht sich) das ich denn das Bild was mit dem text verknüpft ist per Mouseover angezeigt bekomme.
 
servus !

also das ist genau das was ich brauche, nur bekomme ich beides nicht so richtig ans laufen.
Der code von sven klappt soweit, nur das ich dann bei mouseover das selbe bild angezeigt bekomme das ich auch schon in klein habe ... eieiei ^^
 
Hallo, habe ein Problem mit dem Code. Wenn ich mit der maus über das Bild fahre wird es nicht vergrößert. Mein HTML Code
PHP: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


 <html xmlns="http://www.w3.org/1999/xhtml"> 

	<head>
		<title>Faszination Segelfliegen</title>
		<link rel="stylesheet" type="text/css" href="cssstartseite.css" />
		<script src="galerie.js" type="text/javascript"></script>
	</head>
	<body>
			<div>
				<img id="Hintergrundbild" src="bild.jpg" alt="Hintergrund"/>
			</div>
 
 
 
 
		<div id="Insgesamt">

 
			<div id="Navigationsleiste" />
			

 
			<div id="Navigationsleisteee">
				<table width="70px">

					<tr>
						<th> <a class="style" href="htmlstartseite.html">Startseite</a> </th>
						</tr>
						<tr>
						<th> <a class="style" href="1.unterseite.html">Was ist Segelfliegen?</a> </th>
					</tr>
					<tr>
						<th> <a class="style" href="ausbildung.html">Die Ausbildung</a> </th>
					</tr>
					<tr>
						<th> <a class="style" href="bilder.html">Bildergalerie</a>
					</tr>
					<tr>
						<th> <a class="style" href="video.html">Video</a>
					</tr>
					<tr>
						<th> <a class="style" href="links.html">Links</a>
					</tr>
					<tr>
						<th> <a class="style" href="">Impressum</a>
					</tr>
					
				</table>	
			</div>


		</div>
 
			<div id="Inhalt">
	
			<div id="Hauptuberschrift">Bildergalerie</div>
		
	<img src="segelflug1.jpg" name="hovern" alt="Segelflugzeug" width="30px" />

			
	
</div>
 
			
 

 
 
 </body>




 </html>

Der Java Code in einer extra Datei
PHP: 
function show_(objEvt)
{
   blnIE                          = window.event;
   objEvt                         = (blnIE) ? window.event : objEvt;
   objTarget                      = (blnIE) ? objEvt.srcElement : objEvt.target;
   document.detail.src            = objTarget.src;
   intScrollX                     = (blnIE) ? document.body.scrollLeft : window.pageXOffset;
   intScrollY                     = (blnIE) ? document.body.scrollTop : window.pageYOffset;
   intPosX                        = (blnIE) ? objEvt.clientX : objEvt.pageX;
   intPosY                        = (blnIE) ? objEvt.clientY : objEvt.pageY;
   document.detail.style.left     = intPosX + 2;
   document.detail.style.top      = intPosY + 2;
   document.detail.style.display  = '';
}

function hide_()
{
  document.detail.style.display   ='none';
}

arrImgs=document.getElementsByName('hovern');

for(i=0;i < arrImgs.length;++i)
  {
    arrImgs[i].onmouseover=show_;
    arrImgs[i].onmousemove=show_;
    arrImgs[i].onmouseout=hide_;

  }

Bitte antwortet schnell. Schon vielen Dank im vorraus
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück