pure
hi.
ich kämpfe mal wieder mit javascript!
in einer bildergalerie arbeite ich mit einem einfachen bild-wechsel script:
| code: |
1:
2:
3:
4:
5:
|
function wechsel(url) {
window.document.images.bildname.src=url;
}
|
|
die thumbs:
| code: |
1:
2:
3:
|
<a href="javascript:wechsel('news/upload/bilder/<?php echo $row->bild;?>');"><img src="news/upload/bilder/<?php echo $row->bild;?>" border="0" alt="Vorschau" id="thumbs" name="<?php echo $row->bild;?>"></a><br />
|
|
das grosse bild wird dann via
| code: |
1:
2:
3:
|
<img src="news/upload/bilder/<?php echo $arrayOut[0];?>" name="bildname" id="bildgross"/>
|
|
angezeigt.
die thumbs sind links vom grossen bild untereinander gelistet. ich möchte nun das thumbnail, welches rechts als grosses bild gerade aktiv ist, hervorheben.
kann ich meine funktion irgendwie erweitern, um das zu erreichen? oder ein onclick-event? oder brauchts da gar ajax? bin für tipps dankbar!
moonsword
über ein this?
du kannst einfach über ein this auf das a-element zugreifen...damit du nicht soviel übergeben musst, hab ich einfach die url von dem img genommen
| code: |
1:
|
<a href="javascript:wechsel(this);"><img src="news/upload/bilder/<?php echo $row->bild;?>" border="0" alt="Vorschau" id="thumbs" name="<?php echo $row->bild;?>"></a><br /> |
|
mit diesem javascript code:
| code: |
1:
2:
3:
4:
|
function wechsel(this) {
window.document.images.bildname.src=this.getElementByTagName('img')[0].src;
this.style.border= '1px solid red';
} |
|
so mal nebenbei....es kann nur 1 mal eine id geben...d.h. wenn du in thumbs die id "thumbs" setzt...dann taucht diese öfters auf und es gibt probleme...du kannst es über class machen, wenn ud für mehrere eigenschaften setzen willst..aber nicht id
pure
danke fürs echo.
irgendwas schein ich noch nicht zu peilen..
ersetz ich damit meine jetzige funktion? klappt so nicht (objekt erwartet)
hab ich was übersehen?
moonsword
damned..sollte mein zeug vorher doch testen ^^
also so gehts:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
|
<html>
<head>
<title>test</title>
<script type="text/javascript">
<!--
function wechsel(t) {
window.document.images.bildname.src=t.src;
t.style.border= '1px solid red';
}
//-->
</script>
<style type="text/css">
<!--
.thumbs {
width: 100px;
}
//-->
</style>
</head>
<body>
<img src="266884.jpg" border="0" alt="Vorschau" class="thumbs" name="" onclick="wechsel(this);"><br />
<img src="" name="bildname" id="bildgross" />
</body>
</html> |
|
pure
vielen dank für deine unterstützung!
ich versuch gerade eine if-anweisung unterzubringen, damit nur das jeweils aktive bild markiert ist..
mal eine generelle frage:
kennst du gute tuts, wo man mehr von der materie lernen kann?
mich würde z.b. interssieren, was es an programmierungs-aufwand wäre, wenn man die nicht-aktiven bilder etwas 'matt' oder dunkler haben möchte und das aktive hell. so eine art lightbox..
auf jeden fall, vielen dank für deine mühe!
pure
filter-variante hab ich inzwischen gefunden
| code: |
1:
2:
3:
4:
5:
|
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter:alpha(opacity=50);
|
|
und dann im javascript eifach:
| code: |
1:
2:
3:
|
t.style.filter='alpha(opacity=100)';
|
|
mal sehen, ob ich die variante, das dies nur für das aktive bild gültig ist, noch finde. tipps are welcome!
moonsword
http://moonsword.info/~jan/test.html
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
|
<html>
<head>
<title>test</title>
<script type="text/javascript">
<!--
var old = NULL;
function wechsel(t) {
if(old) {
old.style.opacity = "0.5";
}
window.document.images.bildname.src=t.src;
t.style.opacity= '1';
old=t;
}
//-->
</script>
<style type="text/css">
<!--
.thumbs {
width: 100px; -moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter:alpha(opacity=50);
opacity:0.5;
}
//-->
</style>
</head>
<body>
<img src="266884.jpg" border="0" alt="Vorschau" class="thumbs" name="" onclick="wechsel(th
is);">
<img src="DSC_2576.JPG" border="0" alt="Vorschaut" class="thumbs" name="" onclick="wechsel
(this);">
<br />
<img src="" name="bildname" id="bildgross" />
</body>
</html> |
|
ja war ein fehler meinerseits ^^ ist eine sehr blöde variante...aber funktioniert.
