Hover Effekt in Bild "Area"

    Ahoi, :)

    Jetzt kommt mein erster Beitrag hier :o

    Also ich habe ein Online-Magazin mit zugehöriger Testseite: http://kleinundsmart-archiv.npage.de/willkommen.html
    Das Regal mit den Ausgaben ist so eingestellt, dass man zur Ausgabe kommt, wenn man auf den Bereich klickt, in dem das Bild der Ausgabe ist:

    HTML
    <img alt="Regal" src="http://file1.npage.de/010182/58/bilder/regaljanuar.png" usemap="#regal" />
<map name="Regal"> 
 <area shape="rect" coords="92,14,173,130" href="http://issuu.com/kleinundsmart/docs/dezember" title="Read now" />
</map>

    Das war sogar für mich als HTML-Anfänger noch ganz easy. Jetzt kommt das Problem: Ich hätte den Code gerne so, dass es in der "area" einen Hover-Effekt gibt und ein etwas größeres Bild der Ausgabe erscheint. Ich habe zwar schon ein bisschen herumprobiert, bin aber noch nicht zur Lösung gekommen :(

    Ich hoffe ihr könnt mir helfen und bedanke mich schonmal herzlich :)

    Solange du nur einen Fehler in deinem Code drin hast, hilft dir diese verschworene Gemeinde hier nicht. Sie geben sich nicht mit HTML-Ignoranten ab. :lol:

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

    Die Fehler beziehen sich nur auf deinen Code.
    Schau dir mal im Firefox deine Seite an und klicke mit der rechten Maustaste in ein freies Feld und wähle Quelltext ansehen aus.
    Alles was du dann rot siehst sind schlimme Fehler.

    - - - Aktualisiert - - -

    Zitat von Gastl

    diese verschworene Gemeinde


    Ich bin Teil davon und schwöre, dass ich nichts Gemeines hab.

    Zitat von explanator

    Die Fehler beziehen sich nur auf deinen Code.
    Schau dir mal im Firefox deine Seite an und klicke mit der rechten Maustaste in ein freies Feld und wähle Quelltext ansehen aus.
    Alles was du dann rot siehst sind schlimme Fehler.

    Das geht doch voll, ich hätte mit schlimmerem gerechnet :razz:
    Der oben gepostete Code ist schonmal nicht rot, also richtig.
    Komischerweise ist

    HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    rot. ich habe das Design machen, lassen was bringt diese "Überschrift" denn eigentlich?
    Am fehlerbehaftetsten sind die Boxen an der Seite der HP.

    Gut, kümmere ich mich, im Rahmen meiner Möglichkeit, drum; aber kann mir denn jemand mit dem im Eingangspost beschriebenem Problem helfen? Da habt ihr jetzt keine Ausreden mehr, denn der Code ist laut Firefox richtig :lol:

    Zitat von TiBo007

    Da habt ihr jetzt keine Ausreden mehr, denn der Code ist laut Firefox richtig :lol:


    Nö, 9 rote Zeilen kann man nicht als richtig bezeichnen.

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

    Mit Area allein gehts nicht, aber das weißt du selber und behältst die Lösung auch für dich. ;)

    Ich spring einfach mal auf den Zug auf und helfe solange nicht, solang der Code nicht Valide ist. Scheint ja hier so Usus zu sein, was ich aber zum kotzen finde.

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

    Zitat von TiBo007

    Macht es eigentlich Spaß Neulinge zu quälen?


    Dich will niemand quälen, aber was du jetzt vielleicht mühsam erlernt hast, wird dir beim nächsten Mal keine großen Probleme mehr bereiten. ;)

    Die erste rote Zeile ist der Doctype, unter Wikipedia kannst du nachlesen was es damit auf sich hat.

    Du kannst aber nicht den Doctype ändern ohne weitere Änderungen vorzunehmen. Es ist wichtig die Seite fehlerfrei zu haben, weil du dir die Arbeit erleichterst, wenn du einen weiteren Fehler einbaust. Du kannst dann nämlich am Schluss nicht mehr sagen was denn da die falsche Darstellung verursacht hat.
    Da deine Seite am Anfang steht kannst du noch viele Dinge richtig machen und daraus auch etwas lernen, dein Code ist nämlich miserabel wie du gleich sehen wirst.
    Das wir an deinem Problem erst mal nicht weiter machen, liegt nicht daran, dass dich jemand ärgern will, sondern dass du erkennen sollst das du den falschen Ansatz gewählt hast um ans Ziel zu kommen(hover = vergrösserung und klick weiter auf andere Seite).

    Fangen wir an.

    Dein Head sieht so aus ohne Javascript:


    Du hast da 2 mal den Titel drin, 2 CSS-Dateien und einige Meta-Angaben, die uninteressant sind.

    Jetzt machst du erst mal das hier daraus:

    HTML
    <html lang="de">
  <head>
  <meta charset="UTF-8">
  <title>Klein und Smart</title>
  <meta name="description" content="Das Archiv">
  <link rel="stylesheet" href="/main.css" type="text/css">
  </head>

    Mehr brauchst du nicht. Javascript stammt von dir? Wenn ja kommt das später rein.
    Du brauchst auch nur eine CSS-Datei, kann sein das die 2. vom Seitenanbieter stammt, der da Werbung platzieren will, aber das weisst du besser.
    Wenn das so ist solltest du den Anbieter wechseln. bplaced.net ist da sehr gut, nutze ich selber und ist Werbefrei.

    Wenn du soweit bist lade es hoch und wir schauen es uns an.

    Ich habe das Design damals erstellen lassen, weil ich mich damit nicht auskenne. Javascript stammt also auch nicht von mir.
    Wir sind bei dem Anbieter 'npage' und von denen wird die zweite CSS-Datei wohl stammen. Wir sind gerade in Gesprächen mit Sponsoren, um auf einen Premium-Account umzusteigen, bei dem die Werbung (und die zweite CSS-Datei?) wegfallen wird.

    So, das habe ich jetzt geändert. Musste jetzt der Kopf <!Doctype... noch bleiben oder auch weg? Ich habe ihn jetzt noch drin und jetzt sieht die Seite ein bisschen merkwürdig aus :o

    Ja, das war die falsche CSS-Datei, ist alles kein Problem.

    Dein Head muss so aussehen:

    HTML
    <html lang="de"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Klein und Smart</title> 
        <meta name="description" content="Das Archiv"> 
        <link rel="stylesheet" href="http://file1.npage.de/008939/32/html/style2.css" type="text/css"> 
    </head>

    Unter meta name="description" hasst du bei content Das Archiv stehen, da muss die Beschreibung der Seite rein max. 255 Zeichen, also kein Roman, sondern eine für Aussenstehende sofort erkennbare Beschreibung, was ihn auf der Seite erwartet.

    Einmal editiert, zuletzt von explanator (29. November 2013 um 22:18)