Grafiken als Links

Dirk_68

Es geht um eine Teampage in HTML.
Es sollen Fotos von etwa 9 - 12 Leuten angezeigt werden.
Also z.B. eine Tabelle mit 3 X 3 Felder.
Alle Bilder sind anfangs s/w und wechseln beim Mouseover in ein farbiges Bild. Gleichzeitig wird in einem weiteren Feld der Name der Person angezeigt. Beim Mousklick wird ein separates Fenster mit Infos zur Person angezeigt.

Kann man sich in etwas vorstellen was ich meine und wie könnte eine HTML/Javascript -Umsetzung aussehen...
Also so in etwa.

[1][2][3]
[4][5][6]
[7][8][9]
[NAME]

LG Dirk

synaptic

joa sowas is möglich... wenn du noch warten kannst mach ich des für dich!

bin am freitag so ab 16:00 uhr von der arbeit zu hause...
ich brauch dann lediglich die links zu den einzelnen bildern und die namen

driver

Code

<table>
<tr>
<td>[url='1.html'][img]1.jpg[/img][/url]</td>
<td>[url='2.html'][img]2.jpg[/img][/url]</td>
<td>[url='3.html'][img]3.jpg[/img][/url]</td>
</tr>
<tr>
<td>[url='4.html'][img]4.jpg[/img][/url]</td>
<td>[url='5.html'][img]5.jpg[/img][/url]</td>
<td>[url='6.html'][img]6.jpg[/img][/url]</td>
</tr>
<tr>
<td>[url='7.html'][img]7.jpg[/img][/url]</td>
<td>[url='8.html'][img]8.jpg[/img][/url]</td>
<td>[url='9.html'][img]9.jpg[/img][/url]</td>
</tr>
</table>

Alles anzeigen

so wär da aufbau grob.....für den mouseover gibts jetzt rein
theoretisch mehrere möglichkeiten. das nicht grundlegend is
könnt ich mir javascript ganz gut vorstellen.
allerdings wär auch ne lösung mit css denkebar, wennst des bild
in den hintergrund legst - bin mir dann bloß nicht sicher was du als
link nehmen kannst *grübl*

@ Driver , man könnte es so machen ( was zwar ziemlich bescheuert ist , aber so gehts )

Code

[url='blabla.html'][/url]

und des solange bis des Hintergrundbild zu sehen ist ...
Also die Lösung geht mit CSS hatte die auch schonmal , funktioniert auch in FF , alle IE und Opera , aber da gäbs bestimmt auch ne bessere Lösung irgendwie ...

synaptic

driver, ich glaub hier ging es um mehr, als nur die struktur der tabelle

Code

<hmtl>
<title>test</title>
<head>


<script type="text/javascript">
//die bilder für den mouseover-effekt vorausladen
if(document.images){


//9 objekte für die aktiven bilder
var img1on = new Image();
img1on.src = "kaninchen1.gif";
var img2on = new Image();
img2on.src = "kaninchen1.gif";
var img3on = new Image();
img3on.src = "kaninchen1.gif";
var img4on = new Image();
img4on.src = "kaninchen1.gif";
var img5on = new Image();
img5on.src = "kaninchen1.gif";
var img6on = new Image();
img6on.src = "kaninchen1.gif";
var img7on = new Image();
img7on.src = "kaninchen1.gif";
var img8on = new Image();
img8on.src = "kaninchen1.gif";
var img9on = new Image();
img9on.src = "kaninchen1.gif";


//9 objekte für die inaktiven bilder
var img1off = new Image();
img1off.src = "whippet.gif";
var img2off = new Image();
img2off.src = "whippet.gif";
var img3off = new Image();
img3off.src = "whippet.gif";
var img4off = new Image();
img4off.src = "whippet.gif";
var img5off = new Image();
img5off.src = "whippet.gif";
var img6off = new Image();
img6off.src = "whippet.gif";
var img7off = new Image();
img7off.src = "whippet.gif";
var img8off = new Image();
img8off.src = "whippet.gif";
var img9off = new Image();
img9off.src = "whippet.gif";




function imgOn(imgName, person){
if(document.images){
document.images[imgName].src=eval(imgName + "on.src");
document.getElementById("NAME").innerHTML="<h1>"+person+"</h1>";}
                       }


function imgOff(imgName){
if(document.images){
document.images[imgName].src=eval(imgName + "off.src");
document.getElementById("NAME").innerHTML="";}
                       }


}


</script>


<style>
table td{
width:122px;
height:122px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>[url='#'][img]whippet.gif[/img][/url]</td>
<td>[url='#'][img]whippet.gif[/img][/url]</td>
<td>[url='#'][img]whippet.gif[/img][/url]</td>
</tr>


<tr>
<td>[url='#'][img]whippet.gif[/img][/url]</td>
<td>[url='#'][img]whippet.gif[/img][/url]</td>
<td>[url='#'][img]whippet.gif[/img][/url]</td>
</tr>


<tr>
<td>[url='#'][img]whippet.gif[/img][/url]</td>
<td>[url='#'][img]whippet.gif[/img][/url]</td>
<td>[url='#'][img]whippet.gif[/img][/url]</td>
</tr>


</table>




<span id="NAME">


</span>


</body>
</html>

Alles anzeigen

ich denke mal so sollte es dann am ende aussehen....
die adressen von den einzelnen grafiken musste dann im script austauschen, hab jetzt nur zwei willkürliche grafiken genommen...

das

Code

<style>
table td{
width:122px;
height:122px;
}
</style>

musste auch noch so abändern, daß des passt ... oder du lässt es weg.

und joa hatte vor 16:00uhr feierabend heute

edit: den link zum beispiel hatte ich ganz vergessen.....sry:
http://home.arcor.de/synaptic/hilfe/tab.html so sieht meine variante dann aus... ich hoff es ist das was du brauchst

Dirk_68

Hi Synaptic,

super das ist es - so sollte es sein das ist spitze - ich muss dass nur umstricken. Ich denke dann 4x4 ist auch klein Problem ... vielen lieben Dank auch allen die sich Gedanken gemacht haben ...

LG Dirk

synaptic

wennste noch fragen haben solltest kannste mich per icq erreichen 179617753

Dirk_68

Ich hab zwar MSN aber das werd ich schon hinbekommen - kann noch ein zwei Tage dauern - aber ich hab gesehen über MSN bekomm ich dich auch ...und hier natürlich

LG Dirk

driver

@ synaptic

hab ich ja oben gesagt, dases nur der grobe aufbau is.
die js-methode hab ich auch schon gefunden (und ich glaub
auch hier shcon paarmal gepostet) - allerdings find ich se
etwas unfein.....

synaptic

also beim table den background zuverändern klappt im FF mit css, aber im IE siehts da anders aus... welche feinere methode würdeste denn nehmen?

driver

css-background klappt nicht im ie ? sicher ?

synaptic

der background kann schon vergeben werden, nur bei nem hover fruchtet des net mehr...

schau dir den folgenden link mal im ie und im ff an
http://home.arcor.de/synaptic/stickerfood/index2.html

hab den ie6

driver

dann hast evtl was falsch gemacht ?
also bei mir funkt des ie sowohl ff. manche sind zwar nur
farben - aber was bei farben geht sollte bei grafiken auch gehn...

http://www.on-mouseover.de/css.html
http://aktuell.de.selfhtml.org/artikel/css/mouseover/

des liegt an der schreibweise von a:hover ...da muss mand es irgendwie komisch schreiben oder so , vergleicht mal eure Css-Dateien , dann könnt ihrs sehen bzw du Synapic

Dirk_68

Ok - ich hab mal rumgebastelt und wollte das Ding aml auf die Spitze treiben. Bisher habe ich unter Anwendung des Codes von synapic

9 S/W Bilder als Ausgangslage
9 Wechsel auf RGB Bild beim Mouseover und dazu der Name unter der Tabelle
9 Mouseklick auf die jeweilige Infoseite

Würde es noch umsetzbar sein, beim Mouseover nicht nur den Namen unter der Tabelle (wie jetzt) sondern eine große Bildversion (RGB) neben der Tabelle anzeigen zu lassen ?

Das wäre dann ziemlich Hammer ... auch wenn es mir jetzt schon recht gut gefällt

LG Dirk

synaptic

joa, möglich ist das auch...
poste mal eben deinen überarbeiteten quellcode, dann bastel ich das um...

synaptic

wenn ich die kleinen pix nutze, werden die in ner vergrößerten darstellung arg verpixelt... also bräuchtest du da auch neue bilder...

Dirk_68

Klar, die stricke ich mir dann zusammen - das ist schon klar - ist nur so eine Idee beim Zusammenschreiben gewesen ... zumal ich die 80x80 Pics evtl noch kleiner machen muss, da noch Bilder hinzu kommen könnten ... es sollte dann immer so groß sein, wie die Tabelle an sich hoch ist

LG Dirk

synaptic

Code

<hmtl>
<title>test</title>
<head>


<script type="text/javascript">
//die bilder für den mouseover-effekt vorausladen
if(document.images){


//9 objekte für die aktiven bilder
var img1on = new Image();
img1on.src = "balou_rgb.jpg";
var img2on = new Image();
img2on.src = "manja_rgb.jpg";
var img3on = new Image();
img3on.src = "lille_rgb.jpg";
var img4on = new Image();
img4on.src = "fini_rgb.jpg";
var img5on = new Image();
img5on.src = "stephie_rgb.jpg";
var img6on = new Image();
img6on.src = "ulla_rgb.jpg";
var img7on = new Image();
img7on.src = "bobby_rgb.jpg";
var img8on = new Image();
img8on.src = "wickie_rgb.jpg";
var img9on = new Image();
img9on.src = "platz_rgb.jpg";


//9 objekte für die inaktiven bilder
var img1off = new Image();
img1off.src = "balou_sw.jpg";
var img2off = new Image();
img2off.src = "manja_sw.jpg";
var img3off = new Image();
img3off.src = "lille_sw.jpg";
var img4off = new Image();
img4off.src = "fini_sw.jpg";
var img5off = new Image();
img5off.src = "stephie_sw.jpg";
var img6off = new Image();
img6off.src = "ulla_sw.jpg";
var img7off = new Image();
img7off.src = "bobby_sw.jpg";
var img8off = new Image();
img8off.src = "wickie_sw.jpg";
var img9off = new Image();
img9off.src = "platz_sw.jpg";




function imgOn(imgName, person){
if(document.images){
document.images[imgName].src=eval(imgName + "on.src");
document.getElementById("NAME").innerHTML="<h1>"+person+"</h1>";
var bigtarget = document.getElementById("bigpic");
bigtarget.src=eval(imgName + "on.src");
bigtarget.style.visibility="visible";
}
                       }


function imgOff(imgName){
if(document.images){
document.images[imgName].src=eval(imgName + "off.src");
document.getElementById("NAME").innerHTML="";
var bigtarget = document.getElementById("bigpic");
bigtarget.style.visibility="hidden";
}
                       }


}


</script>


<style>
table td{
width:82px;
height:82px;
}
.big{
width:250px;
height:250px;
visibility:hidden;
}


</style>
</head>
<body>
<table border="0">
<tr>
<td>[url='#'][img]balou_sw.jpg[/img][/url]</td>
<td>[url='#'][img]manja_sw.jpg[/img][/url]</td>
<td>[url='#'][img]lille_sw.jpg[/img][/url]</td>
</tr>


<tr>
<td>[url='#'][img]fini_sw.jpg[/img][/url]</td>
<td>[url='#'][img]stephie_sw.jpg[/img][/url]</td>
<td>[url='#'][img]ulla_sw.jpg[/img][/url]</td>
</tr>


<tr>
<td>[url='#'][img]bobby_sw.jpg[/img][/url]</td>
<td>[url='#'][img]wickie_sw.jpg[/img][/url]</td>
<td>[url='#'][img]platz_sw.jpg[/img][/url]</td>
</tr>


</table>




<span id="NAME">


</span>
<div style="position:absolute; top:20px; left:350px;">[img][/img]</div>
</body>
</html>

Alles anzeigen

hinterleg unter den entsprechenden bildern am besten nur die großen bilder... denn was großes kleiner machen ist kein thema, aber was kleines einfach so zu vergrößern bringt distortion (verzerrung, verpixelt, usw).

so brauchste keine extra-dateien und der quellcode is ganz easy erweitert.

Dirk_68

OK Super - ich habs mir gerade angesehen und ausprobiert - genial ... DANKE

LG Dirk

Tags