Hover Effekt in Bild "Area"

TiBo007

Ahoi,

Jetzt kommt mein erster Beitrag hier

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

Bandit

Zitat von TiBo007

Das war sogar für mich als HTML-Anfänger noch ganz easy.

Wohl eher nicht, denn siehe: http://validator.w3.org/check?verbose=…willkommen.html

TiBo007

Die Fehler beziehen sich jedoch bestimmt auf das ganze Design und nicht auf diesen einen Code, oder?

Gastl

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.

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.

- - - Aktualisiert - - -

Zitat von Gastl

diese verschworene Gemeinde

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

TiBo007

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
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

Gastl

Zitat von TiBo007

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

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

TiBo007

Jetzt ist es nur noch eine, zufrieden...?

explanator

Jetzt fehlt der Doctype, der Head und der Rest vom Code.

TiBo007

Ist jetzt aber auch egal, es geht nur um den oben genannten Code.
Kann mir da bitte jemand helfen

explanator

Zitat von TiBo007

Ist jetzt aber auch egal, es geht nur um den oben genannten Code.
Kann mir da bitte jemand helfen

Nein es ist keineswegs egal. 'Wenn du Hilfe willst, musst du auch mitarbeiten sonst können wir hier schliessen.

Gastl

Was hast du da https://www.forum-hilfe.de/threads/55648-…ll=1#post408864 nicht verstanden?

explanator

Gastl Warum bringst du nicht lieber die Lösung?
Anscheinend hälst du dich da ja auch sehr bedeckt, oder kennst du die womöglich auch nicht?

Gastl

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.

TiBo007

Zitat von Gastl

Was hast du da https://www.forum-hilfe.de/threads/55648-…ll=1#post408864 nicht verstanden?

Das erste "nicht"
Macht es eigentlich Spaß Neulinge zu quälen?

So, ein paar rote Zeilen habe ich verbessert. Die Frage mit der ersten roten Zeile habt ihr mir aber noch nicht beantwortet Das ist jetzt die letzte rote Zeile.

Bandit

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.

explanator

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:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <link rel="stylesheet" type="text/css" href="http://file1.npage.de/008939/32/html/style2.css"/> 
        <title>Klein und Smart
        </title> 
        <title>Klein und Smart
        </title> 
        <meta http-equiv="content-language" content="de" /> 
        <meta name="keywords" content="kleinundsmart archiv" /> 
        <meta name="description" content="Das Archiv" /> 
        <meta name="robots" content="index, follow" /> 
        <meta name="author" content="Tobias Born" /> 
        <meta name="copyright" content="Tobias Born" />  
        <link rel="stylesheet" href="/main.css" type="text/css" />  
        <base href="http://kleinundsmart-archiv.npage.de/" />  
    </head>

Alles anzeigen

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.

TiBo007

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

explanator

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.

TiBo007

Das sieht gut aus

Tags