• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Klappt nicht: Infobox per onclick und kleinem Pop-up

Status
Für weitere Antworten geschlossen.
L

lapaluna

Neues Mitglied
Hallo an alle.

Bin leider noch ein wenig unerfahren und noch nicht fündig geworden bei meiner bisherigen Internetrecherche - und im html Forum haben Sie mich mehr oder weniger hierher verwiesen.

Ich habe eine Liste mit verschiedenen Bennenungen, von denen ich gerne das Poweshift erklären lassen möchte. Siehe Grafik:

attachment.php


Ich habe diese Tabelle mit ein paar Grafiken als .jpg abgespeichert und auf der Internetseit platziert. Um das Wort Powershift anklicken zu können, habe ich mit folgendem Code dieses Produkt markiert und wenn man drüber geht, kann man es anklicken:

HTML: 
<html> 
  <p> 
  <img src="Produktleistungen.jpg" width="457" height="280" border="0" alt="" usemap="#Produktleistungen"> 
    <map name="Produktleistungen"> 
      <area shape="rect" coords="12,226,83,237" 
            href="www.was-ich-möchte.de" alt="Erklärung" title="Erklärung"> 
      </p> 
    </map> 
  </body> 
  </html>
Nun ist es so, dass wenn ich darauf klicke, ich jegliche Internetadresse öffnen kann. Ich möchte aber, dass sich ein kleines Fenster öffnet (muss kein Browserfenster sein) mit einer Beschreibung wie: Powershift bedeutet bla bla bla. Ich habe gehört, dass dies mit der onclick Funktion geht und habe auch schon einiges probiert - geht aber irgendwie nicht.

In kurzen Worten= Wie bekomme ich es hin, damit ich auf dieses Feld klicke und sich ein kleines Fenster per Pop-up öffnet mit einer Beschreibung (+ dieses Fenster ich eventuell von der Höhe und Breite bearbeiten kann)?

Sorry, falls ich das ein wenig umständlich erklärt habe!
1000 Dank für jegliche Hilfe...
 

Anhänge

  • Produktleistungen.jpg
    Produktleistungen.jpg
    31,7 KB · Aufrufe: 12
Die einfachste Variante wäre ein <p> Element mit dem text zu erstellen und dieses über css zu verstecken (visibility: hidden). Bei einem "onclick" wird die Box dann angezeigt (visibility: visible). Nun kann man noch einen link da rein machen der zum beispiel schliessen heisst. Dann sollte der oben genannte p tag in einem div stehen und sich der ganze code auf das Div beziehen :P
Also um das mal zu verdeutlichen

HTML: 
<div id="powerShiftBox" class="hiddenPowerShift">
  <p>Mein Text zu Powershift</p>
  <a href="#" id="closePowerShiftBox">Schliessen</a>
</div>

Und der JS-teil könnte teilweise so aussehen
Code: 
window.onload = function)( {
  // Um Die Box sichtbar zu machen
  document.getElementById("powerShiftShow").onclick = function() {
     // Box sichtbar machen
     document.getElementById("powerShiftBox").className = "visiblePowerShift";
  };

  // Um die Box zu schliessen
  document.getElementById("closePowerShiftBox").onclick = function() {
     // Box unsichtbar machen
     document.getElementById("powerShiftBox").className = "hiddenPowerShift";
  };
};

Das ganze dann noch mit CSS ausschmücken und tada :D.
Würde dir aber eventuell zu einer ähnlichen Variante raten, bloß dass es dann mit mouseover geht. Dann wird nämlich kein Javascript gebraucht.
 
lapaluna schrieb:
Ich habe eine Liste mit verschiedenen Bennenungen
Ich habe diese Tabelle mit ein paar Grafiken als .jpg abgespeichert und auf der Internetseit platziert.
Zum Vergrößern anklicken....
Wie kommt man auf so eine Idee?
Wenn ich Text habe, gebe ich diesen als Text aus (hier richtig als Tabelle ausgezeichnet) und dann ist Deine Anforderung auch leichter umzusetzen.

Was machst denn Du, wenn der Nutzer keine Grafiken anzeigen kann/will/darf? Dann sieht er nichts und kann nichts machen. Ziel verfehlt - oder?
 
Hey Gilles - vielen Dank. Werde das gleich mal ausprobieren. Die Variante ohne Javaskript würde mir mehr gefallen - auch wenn es dann ein Mousover sein sollte.
Muss ich da viel ändern?

Trotzdem schon mal 1000Dank...
 
Efchen schrieb:
Wie kommt man auf so eine Idee?
Wenn ich Text habe, gebe ich diesen als Text aus (hier richtig als Tabelle ausgezeichnet) und dann ist Deine Anforderung auch leichter umzusetzen.

Was machst denn Du, wenn der Nutzer keine Grafiken anzeigen kann/will/darf? Dann sieht er nichts und kann nichts machen. Ziel verfehlt - oder?
Zum Vergrößern anklicken....

Du hast auf jeden Fall recht ... aber die tabelle ist in wirklichkeit größer, mit grafiken und wenn ich das alles in html mache, dauert das schon viel zeit. zumindest für mich. Und das schlimme ist, es sind nur zwei Worte eigentlich.
Aber klar, wenn man die Bilder nicht sehen kann, hat es wohl auch das Ziel verfehlt... aber ich bin schon zu weit ;-)
 
Schau dir mal das Tutorial an für die CSS variante:
Infobox mit CSS

Ansonsten zu deinem Bild. Ich denke: "ich bin schon zu weit" Sollte nicht deine Ausrede sein. Du kannst ja vorerst die Bild Version online lassen, jedoch an einer tabellarischen Form arbeiten und diese hochladen sobald sie fertig ist.
Denn wenn das Bild echt so groß ist wie du sagst, brauchst dieses eine gewisse Ladezeit. Der text wird wesentlich schneller geladen. Wenn du dich mit HTML richtig auseinander setzt (Danach noch etwas mit css), solltest du die Tabelle recht zügig fertig gestellt haben. Wenn du dabei dann Probleme haben solltets, kannst du dir Hilfe im HTML im bzw. CSS Bereich hier im Forum holen. Denn es führt wohl kein Weg dran vorbei, wenn alle deine Tabelle anschauen können sollen. :)
 
lapaluna schrieb:
Die Variante ohne Javaskript würde mir mehr gefallen - auch wenn es dann ein Mousover sein sollte.
Zum Vergrößern anklicken....
"mouseover", genaugenommen "onmouseover" IST JavaScript (ein Event-Handler).

lapaluna schrieb:
wenn ich das alles in html mache, dauert das schon viel zeit.
Zum Vergrößern anklicken....
Wenn ich zum Autofahren erst einen Führerschein machen muss, dauert das für mich zu lang, da fahr ich lieber mit nem BobbyCar auf der Straße!!??!???!?

Aber klar, wenn man die Bilder nicht sehen kann, hat es wohl auch das Ziel verfehlt... aber ich bin schon zu weit ;-)
Zum Vergrößern anklicken....
Das wiederum heißt soviel wie "Hab keinen Bock auf Euch Leute, die keine Grafiken sehen können oder die Ihr blind seid".

Meine neckischen (aber berechtigten!) Kommentare natürlich immer unter der Voraussetzung, dass es sich um eine stinknormale, öffentliche Website handelt, und nicht um eine private Web-Anwendung. Wenn es dann noch eine gewerbliche Website werden soll, mit der Geld verdient werden muss, dann gibts noch den Fehdehandschuh feste ins Gesicht geklatscht für so viel Nutzerunfreundlichkeit.
 
Efchen schrieb:
"mouseover", genaugenommen "onmouseover" IST JavaScript (ein Event-Handler).
Zum Vergrößern anklicken....
*Meld* My Fault :)

Er meint natürlich ein CSS-Hover, was meines erachtens einem mouseover in Javascript gleich käme (bitte korrigieren wenns nicht stimmt :))
Hab das Wort mouseover nämlich im vorigen Beitrag benutzt.

Edit: Oder gilt hover auch für die Tastatur?

Die CSS-Variante ist auf jeden Fall nutzerfreundlicher. Kenn mich leider nicht mit den Textbasierten Browsern aus, aber können die leute mit dem browser auch einen Hover-Effekt auslösen?
 
Mir gefallen deine Kommentare. Und Gille seine natürlich auch.
Ihr seid ja alle auch Profis und macht das im handumdrehen. Ich beschäftige mich eben schon seit 2 Tagen (ihr werdet wohl darüber schmunzeln) mit dieser Kleinigkeit und im Grunde sollte ich mich von Anfang mit dieser Materie beschäftigen, und nicht nur irgendwelche html-Tags aus dem Internet kopieren und zuammenkleistern (-> so viel zum Thema Führerschein ;)).

Aber man macht das ja so selten und wenn man was gelernt hat, hat man es in wenigen Wochen, Monate schon wieder vergessen.

Muss noch etwas korrigieren: Ich habe das am Anfang falsch ausgedrückt mit der Internetseite. Ich mache eine Online-Befragung für meine Diplomarbeit. Dieses Programm kann man mit html-Tags bearbeiten. Ich komme bei meiner Befragung dann auf diese Produktliste, um den Leuten zu erklären, was auf Sie zukommt in der weiteren Befragung - und deshalb wollte ich gerne diese Infobox.

Also Efchen, du hast vollkommen recht - wenn es nicht alles sehen können, macht dies gar keinen Sinn! Wiederrum scheint es etwas komplizierter als Gedacht - werde mal versuchen, Gille seinen Vorschlag gründlicher anzuschauen - oder meint ihr, bei einer Befragung geht das gar nicht?
 
lapaluna schrieb:
...oder meint ihr, bei einer Befragung geht das gar nicht?
Zum Vergrößern anklicken....
Also das Thema spielt ja an sich keine Rolle. Wenn du einmal weisst wie es mit der Semantik in HTML aussieht wirst du diese auch garantiert nicht mehr vergessen :) Und was CSS betriffst, so musst du dich auch nur mit den Sachen beschäftigen, die du in deinem Fall auch brauchst. Wenn du also logisches Denkvermögen hast, sollte deine Tabelle recht zügig in HTML umgesetzt sein. (Je nach Menge und deinem Lernverhalten ungefähr in 1-2 Stunden). Um dann die Popup-Box zu erstellen solltest du dir das Tutorial durchlesen. Wie lange das nun im Endeffekt dauert weiß ich auch nicht, da ich es selber nur grob überflogen habe :)
Falls du dort dann auf Probleme stoßen solltest, wirst du hier im Forum Hilfe kriegen.(Sind ja alle immer recht schnell hie rmit antworten :D)

Edit:

Ich heisse übrigen Gilles :D
 
Und nochwas...niemand schmunzelt über Anfänger. Jeder hat mal klein angefangen.
Aber wir reden einfach Tacheles und sehen keinen Sinn darin, ungünstige oder sinnfreie Lösungsansätze weiter zu verfolgen.

Aber in 2 Tagen ist eben noch kein Meister vom Himmel gefallen :-)
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben