✔ Dynamische ID-Vergabe

F

Fuma15

Mitglied
Hi Leute,

ich versuche seit Monaten eine Video-Datenbank aufzubauen mittels php und mysql

ich möchte gerne das bei der Anzeige der Filme die Filmcover zu sehen sind die, wenn ich mit der Maus darüber fahre sich vergrößern.
Das Problem habe ich inzwischen hinbekommen.
Mein momentanes Problem ist das ich dies mittels JavaScript und innerHTML realisieren und auf der Seite durchaus mehr Filme angezeigt werden sollen.
Problematisch wird es das ich nur dem Element auf dem gerade die Maus zeigt ansprechen möchte.
D.h. nur dieses Element soll sich vergrößern nicht alle anderen mit der selben ID.
Gibt es eine möglich mittels PHP eine dynamische ID-Vergabe zu realisieren oder sollte ich es viellicht irgendwie versuchen anders zu realisieren wenn es anders geht bin ich über Verbesserungsvorschläge sehr dankbar

Hier erstmal mein Quellcode(besteht zur zeit nur aus HTML wird aber noch entsprechend umstrukturiert)

PHP:

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Video-Datenbank</title>
		<link rel="stylesheet" type="text/css" href="../css/styles.css">
		<script type="text/javascript" src="../javascript/dbshow.js"></script>
	</head>
	<body>
		<div id="formShow">
			<form action="<?php $PHP_SELF ?>" method="post">
				<label>Suche nach:</label>&nbsp;<input type="Text" name="suchanfrage" size="24" maxlength="60">&nbsp;
				<label>Suchkriterium:</label>&nbsp;<select name='suchkrit'>
        										<option value='titel'>Titel</option>
							        			<option value='typ'>Typ</option>
							        			<option value='genre'>Genre</option>
								       			<option value='sonstiges'>Bemerkungen</option>
											</select>&nbsp;
				<label>Sortieren nach:</label>&nbsp;<select name='sort'>
							        			<option value='titel'>Titel</option>
							        			<option value='typ'>Typ</option>
							        			<option value='genre'>Genre</option>
											</select>&nbsp;<input type="Submit" name="suche" value="Suche">
			</form>
		</div>
		
		<div id="tabShow">
			<table>
				<tr>
					<td height=190 width=190>
						<span class="cover" id="cover"><img src="./untitled.bmp" height=90 width=90 onmouseover="scalePic();"></span>
					</td>
					<td height=190 width=190>
						<span class="cover"><img src="./untitled.bmp" height=90 width=90 onmouseover="scalePic();"></span>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

und hier mein JavaScript:
Code: 
function scalePic(){
	document.getElementById("cover").innerHTML="<img src='./untitled.bmp' width='180' height='180' onmouseout='picNormal();'>";
}

function picNormal(){
	document.getElementById("cover").innerHTML="<img src='./untitled.bmp' width='90' height='90' onmouseover='scalePic();'>";
}

Danke schonmal im voraus

MFG Fuma15
 
Moin,

keine Ahnung, ob es das ist, was du suchst, aber über das Schlüsselwort this kannst du der JS-Funktion das auslösende Element als Objekt übergeben, wenn du also ein Bild hoverst, das Bild. IDs oder dergleichen sind dann nicht notwendig.
 
Wäre eine tolle Lösung gewesen
aber beim this kann ich leider kein innerHTML einsetzen.
Was zur Folge hat, dass durch das Setzen des this in Verbindung mit innerHTML gar nichts mehr funktioniert.

Aber danke trotzdem für den Lösungsvorschlag

Wenn jemand noch andere Lösungen hat wäre ich sehr dankbar ^^
 
Du kannst auch innerHTML damit verwenden, einfacher wäre aber vielleicht einfach nur die Grösse des Bildes zu Ändern, als da irgendwas neues hineinzuschreiben...und soetwas geht sogar ohne JS ;)
HTML: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2008-12-21"  />
<title>Test</title>
<style type="text/css">
<!--
a.thumb{width:90px;display:block;float:left;}
a.thumb:hover{width:180px;}
a.thumb img{width:100%;border:none;}
-->
</style>
</head>
<body>
<a href="#" class="thumb"><img src="http://www.tutorials.de/forum/attachments/3d-stills/44577d1229974858-schneemann2.jpg"></a>
</body>
</html>
 
Danke für eure Hilfe habe inzwischen eine viel einfacherer Variante herausgefunden:

So existieren für alle HTML-Tag als CSS die Pseudoklassen :hover und :focus.
Also brauche ich das Rad nicht extra neu erfinden, wenn es mit CSS sehr viel einfacher realisiert werden kann ^^

Trotzdem bedanke ich mich recht herzlich für die Hilfe

MFG Fuma15
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück