Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 10 von 21

Thema: Grafiken als Links

  1. #1
    HTML Newbie
    Registriert seit
    15.04.2007
    Beiträge
    8
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Grafiken als Links

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Code:
    <table>
    <tr>
    <td>[img]1.jpg[/img]</td>
    <td>[img]2.jpg[/img]</td>
    <td>[img]3.jpg[/img]</td>
    </tr>
    <tr>
    <td>[img]4.jpg[/img]</td>
    <td>[img]5.jpg[/img]</td>
    <td>[img]6.jpg[/img]</td>
    </tr>
    <tr>
    <td>[img]7.jpg[/img]</td>
    <td>[img]8.jpg[/img]</td>
    <td>[img]9.jpg[/img]</td>
    </tr>
    </table>
    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*
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  4. #4
    Gast

    Standard

    @ Driver , man könnte es so machen ( was zwar ziemlich bescheuert ist , aber so gehts )
    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 ...

  5. #5
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    @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&#40;document.images&#41;&#123;
    
    //9 objekte für die aktiven bilder
    var img1on = new Image&#40;&#41;;
    img1on.src = "kaninchen1.gif";
    var img2on = new Image&#40;&#41;;
    img2on.src = "kaninchen1.gif";
    var img3on = new Image&#40;&#41;;
    img3on.src = "kaninchen1.gif";
    var img4on = new Image&#40;&#41;;
    img4on.src = "kaninchen1.gif";
    var img5on = new Image&#40;&#41;;
    img5on.src = "kaninchen1.gif";
    var img6on = new Image&#40;&#41;;
    img6on.src = "kaninchen1.gif";
    var img7on = new Image&#40;&#41;;
    img7on.src = "kaninchen1.gif";
    var img8on = new Image&#40;&#41;;
    img8on.src = "kaninchen1.gif";
    var img9on = new Image&#40;&#41;;
    img9on.src = "kaninchen1.gif";
    
    //9 objekte für die inaktiven bilder
    var img1off = new Image&#40;&#41;;
    img1off.src = "whippet.gif";
    var img2off = new Image&#40;&#41;;
    img2off.src = "whippet.gif";
    var img3off = new Image&#40;&#41;;
    img3off.src = "whippet.gif";
    var img4off = new Image&#40;&#41;;
    img4off.src = "whippet.gif";
    var img5off = new Image&#40;&#41;;
    img5off.src = "whippet.gif";
    var img6off = new Image&#40;&#41;;
    img6off.src = "whippet.gif";
    var img7off = new Image&#40;&#41;;
    img7off.src = "whippet.gif";
    var img8off = new Image&#40;&#41;;
    img8off.src = "whippet.gif";
    var img9off = new Image&#40;&#41;;
    img9off.src = "whippet.gif";
    
    
    function imgOn&#40;imgName, person&#41;&#123;
    if&#40;document.images&#41;&#123;
    document.images&#91;imgName&#93;.src=eval&#40;imgName + "on.src"&#41;;
    document.getElementById&#40;"NAME"&#41;.innerHTML="<h1>"+person+"</h1>";&#125;
                           &#125;
    
    function imgOff&#40;imgName&#41;&#123;
    if&#40;document.images&#41;&#123;
    document.images&#91;imgName&#93;.src=eval&#40;imgName + "off.src"&#41;;
    document.getElementById&#40;"NAME"&#41;.innerHTML="";&#125;
                           &#125;
    
    &#125;
    
    </script>
    
    <style>
    table td&#123;
    width&#58;122px;
    height&#58;122px;
    &#125;
    </style>
    </head>
    <body>
    <table border="1">
    <tr>
    <td>[img]whippet.gif[/img]</td>
    <td>[img]whippet.gif[/img]</td>
    <td>[img]whippet.gif[/img]</td>
    </tr>
    
    <tr>
    <td>[img]whippet.gif[/img]</td>
    <td>[img]whippet.gif[/img]</td>
    <td>[img]whippet.gif[/img]</td>
    </tr>
    
    <tr>
    <td>[img]whippet.gif[/img]</td>
    <td>[img]whippet.gif[/img]</td>
    <td>[img]whippet.gif[/img]</td>
    </tr>
    
    </table>
    
    
    <span id="NAME">
    
    </span>
    
    </body>
    </html>
    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&#123;
    width&#58;122px;
    height&#58;122px;
    &#125;
    </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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  6. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    15.04.2007
    Beiträge
    8
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  7. #7
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    wennste noch fragen haben solltest kannste mich per icq erreichen 179617753
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  8. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    15.04.2007
    Beiträge
    8
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  9. #9
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    @ 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.....
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  10. #10
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    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?
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. Grafiken
    Von goldeneye im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 3
    Letzter Beitrag: 07.08.2008, 17:12
  2. Grafiken
    Von davidos_no.1 im Forum Computer - Internet Forum
    Antworten: 7
    Letzter Beitrag: 09.02.2008, 11:25
  3. .nif-Grafiken
    Von PC-Freak im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 1
    Letzter Beitrag: 20.05.2007, 22:39
  4. Box aus 4 Grafiken
    Von wurmax im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 13.08.2006, 15:07
  5. Links in Grafiken ?
    Von 1NSANE im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 5
    Letzter Beitrag: 20.10.2005, 23:26

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •