PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Biild Auswahl für Mouse over Effekt Bild durch User


Gohan
2003-06-20, 23:20:23
Hatte grade eine Idee. Wäre es möglich, zwei Auswahl Spalte zu machen, in den mehrer Bilder gelistet sind und man sucht sich aus jeder Spalte jeweils ein Bild aus.

Diese zwei Bilder können dann mit einem Mouse over Effekt Bild nacheinander betrachtet werden. Geht sowas? Kann wer sowas? Ich als reiner HTML User wüsste nämlich nicht wie ich das machen soll. Hätte evtl. jemand Interesse und Zeit dies zu realisieren?
Dies ist für ein größeres Review bei seijin.de gedacht und ich bekomm die Bilder für einen Qualitätsvergleich einfach nicht mehr gescheit geordnet, da es zu viele sind. Und dies scheint mir die beste Lösung.
Danke für Hilfe :)

MfG,
Jan

MadMan2k
2003-06-21, 00:30:28
sollte man mit Java Script ziemlich einfach realisieren können...

Wudu
2003-06-21, 10:26:14
http://www.brauchbar.de/wd/artikel/75.html

Gohan
2003-06-21, 12:50:05
Original geschrieben von Wudu
http://www.brauchbar.de/wd/artikel/75.html

Also die Rollovereffekt selbst ist mir ja schon klar, aber das mit den zwei Menüs zum Auswählen des Bildes ist das wichtige :)

Wudu
2003-06-21, 15:37:49
Mit HTML erstmal unmöglich, eine kombination aus PHP und JS würde das erledigen.

Man müsste bei der Bilderauswahl "eigentlich" nur 2 Bilder aus einer Liste nehmen, dann dann den Bildnamen per post übergeben und die beiden Bilder richtig in den JS code einfügen.

[...coding.....]

So habs schnell implementiert (weils mich interessiert hat).

http://www.wudu.dynu.com/rollover.php <<< mein Server @home nur 64 kbb Upload......

Hier der Source:
natürlich nur Grundfunktionalität ohne grossen schnickschnak......

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>RolloverGenerator</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body>
<?php
if(isset($_POST['Submit']))
{
?>
<!-- rollover -->
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rollOver','','<?=$_POST['img2'];?>',0)"><img name="rollOver" border="0" src="<?=$_POST['img1'];?>" alt="ich rolle über und drüber"></a>
<?php
}
else
{
?>
<!-- form -->
<form name="form1" method="post" action="">
Bild1:
<select name="img1" id="img1">
<option>bild1.jpg</option>
<option>bild2.jpg</option>
<option>bild3.jpg</option>
</select>
<br>
Bild2:
<select name="img2" id="img2">
<option>bild1.jpg</option>
<option>bild2.jpg</option>
<option>bild3.jpg</option>
</select>
<br>
<input type="submit" name="Submit" value="Submit">
</form>
<?php
}
?>
</body>
</html>

MadMan2k
2003-06-21, 17:21:39
da brauch ich aber kein php zu:

http://people.freenet.de/madman2k/rollover.html


<html>
<head>
<title>rollover</title>
<script language="JavaScript">
<!--
bild1 = new Image(); bild1.src="bild1.jpg";
bild2 = new Image(); bild2.src="bild2.jpg";
bild3 = new Image(); bild3.src="bild3.jpg";

var normal = "bild1.jpg";
var highlight = "bild2.jpg";


function rollover(wert) {
window.document.images.bild.src = wert;
}
-->
</script>
</head>
<body>
<IMG SRC="bild1.jpg" WIDTH="180" HEIGHT="147" BORDER="0" onMouseOver="rollover(highlight)" onMouseOut="rollover(normal)" name="bild">
<form>
Bild1:
<SELECT onchange="normal = (this.form.selX.options.value);window.document.images.bild.src = normal;" name=selX size=3>
<option value="bild1.jpg" selected>bild1</option>
<option value="bild2.jpg">bild2</option>
<option value="bild3.jpg">bild3</option>
</OPTION>
</SELECT>
<br><br>
Bild2:
<select onChange="highlight = (this.form.selY.options.value)" name=selY size=3>
<option value="bild1.jpg">bild1</option>
<option value="bild2.jpg" selected>bild2</option>
<option value="bild3.jpg">bild3</option>
</select>
</form>
</body>
</html>

Gohan
2003-06-21, 19:59:41
MadMan2k, BOAH DANKE! Ist genau das was ich gesucht habe :) Perfekt, genial, stark ^^

Wudu
2003-06-21, 20:16:34
Original geschrieben von MadMan2k
da brauch ich aber kein php zu:

schon mal meine signatur inspiziert....??? ;-)

MadMan2k
2003-06-21, 21:28:19
Original geschrieben von Wudu
schon mal meine signatur inspiziert....??? ;-)

jaja, wieso einfach, wenns auch mit php geht... ;)

Wudu
2003-06-21, 22:39:19
Original geschrieben von MadMan2k
jaja, wieso einfach, wenns auch mit php geht... ;)

genau mein reden....