Anklickbare Screenshots in Windows Hilfe

Dalai

Grand Admiral Special
Mitglied seit
14.06.2004
Beiträge
7.420
Renomée
262
Standort
Meiningen, Thüringen
Hallo Leute,

einige kennen sicherlich die Screenshots in diversen Windows Hilfedateien (*.hlp), auf die man klicken kann und dann wird ein Erklärungstext zu diesem angeklickten Element angezeigt (über der gerade angezeigten Seite).

Geht sowas auch bei HTML Hilfedateien (*.chm) bzw. wie macht man das in HTML?
Denn ich hab bis jetzt eine CHM zusammengebastelt, bin aber nicht restlos überzeugt davon - auch weil es Probleme gibt, wenn die CHM auf einem Netzlaufwerk liegt und bestimmte Windows Updates die korrekte Anzeige verhindern.
Oder kann mir jemand eine gute Seite empfehlen, wo ich das Schreiben einer *.hlp nachlesen/lernen kann?
Gibt es generelle Empfehlungen, welcher Hilfedateityp sinnvoller ist? Ich hab kein großes Programm geschrieben, aber ein bisschen erklären sollte man u.a. die Oberfläche doch.
Laufen muss die Hilfe unter allen Windows-Versionen außer 95.

Danke an alle im Voraus.

MfG Dalai
 
nimm CHM, da die HLPs unter Vista nicht mehr gehen
 
Die Anzeigefehler rühren wohl von einem in bestimmter Art und Weise konfigurierten IE her (z.B. wenn Javascript aus ist), denn die CHM benutzen ja den jeweils installierten IE als Anzeigeengine. Den rechten Teil im CHM-Frameset kann man also ganz normal mit den IE testen.

Kannst ja mal ein Stück HTML posten, dann sehen wir, woran es hakt; aber solche Kästchen lassen sich recht einfach erstellen:
PHP:
<html>
<head>
<title></title>

<style type="text/css">
<!--

#bild {
	background-color:#aaffaa;
    color:#333333;
    font-family:arial;
    font-size:12px;
    width:300px;
    height:300px;
    border:1px solid black;
}


#kasten {
	background-color:#ffff99;
    color:#333333;
    font-family:arial;
    font-size:12px;
    font-style:italic;
    width:150px;
    border:1px solid black;
    position:absolute;
    top:200px;
    left:200px;
    visibility:hidden;
}

-->
</style>

</head>
<body>

<div id="bild" onMouseover="javascript:kasten.style.visibility='visible'" onMouseout="javascript:kasten.style.visibility='hidden'">dies ist ein screenshot</div>

<div id="kasten">dies ist ein erklärtext - dies ist ein erklärtext - dies ist ein erklärtext - dies ist ein erklärtext </div>

</body>
</html>
Nur so als Beispiel, das könnte man natürlich alles noch beliebig geschickter machen.
 
Die Anzeigefehler rühren wohl von einem in bestimmter Art und Weise konfigurierten IE her (z.B. wenn Javascript aus ist), denn die CHM benutzen ja den jeweils installierten IE als Anzeigeengine.
Nein, das Problem ist bekannt: z.B. hier zu lesen bzw. eine Suche im Netz nach "html help network drive" ergibt da so einiges.
Ich benutze keinerlei JavaScript in meinen Seiten, lediglich etwas (zugegebenermaßen kopiertes) CSS. Auf einem lokalen Laufwerk funktioniert die Hilfe korrekt, wenn ich diese Datei von einem Netzlaufwerk öffnen will, wird sie nicht angezeigt.

Den rechten Teil im CHM-Frameset kann man also ganz normal mit den IE testen.
Das mache ich natürlich immer vor dem Kompilieren.

Nun zu deinem Beispiel: das sieht schon ganz brauchbar aus. Zwei Fragen dazu:
Geht sowas ohne JavaScript? Mir würde ein Klick auf den Screenshot (einen Teil davon) genügen, ein MouseOver muss nicht sein, ist sogar eher unschön *find*.
Kann man verschiedene Bereiche desselben Bildes mit unterschiedlichen Erklärungen ausstatten?

MfG Dalai
 
Natürlich könntest Du auch einen Hyperlink statt des onClick-Handlers verwenden, aber ohne Scripting wirst Du wohl nicht auskommen - wie soll sonst dynamisch in einer bereits aufgebauten Seite was gemacht werden? Aber eben da das so ist, wird jeder, der den IE auch nur halbwegs benutzen will, auch Javascript aktiviert haben.

Das Problem mit den Netzlaufwerken ergibt sich ja aus dem bescheuerten "Sicherheitskonzept" von Microsoft, das werden wir hier wohl nicht mal eben so lösen können, fürchte ich. Eine Möglichkeit für Dich wäre aber, auf das Kompilieren als CHM zu verzichten und stattdessen einen Link auf eine normale HTML-Datei zu setzen, die der geneigte Benutzer dann mit seinem normalen Standardbrowser öffnen kann (was wohl auch für den Fall, daß das der IE ist, für weniger Probleme sorgen dürfte, weil er dann wohl weniger mit seinem tollen Zonenmodell durcheinanderkommt).

Bzgl. verschiedener Bereiche eines Bildes - das Stichwort heißt Imagemap:
http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm
Dafür gibt es auch ein paar Extraprogramme, wo man die Kästchen einzeichnen kann, falls man sich das Pixelgewurschtel sparen will; aber solange Rechtecke reichen und keine wilden Polygone gefragt sind, geht es auch per Hand.
 
Das Problem mit den Netzlaufwerken ergibt sich ja aus dem bescheuerten "Sicherheitskonzept" von Microsoft, das werden wir hier wohl nicht mal eben so lösen können, fürchte ich.
Das Problem zu lösen hatte ich eh schon aufgegeben, außer wenn man es durch Verwendung der alten Hilfe hätte umgehen können.

Eine Möglichkeit für Dich wäre aber, auf das Kompilieren als CHM zu verzichten und stattdessen einen Link auf eine normale HTML-Datei zu setzen, die der geneigte Benutzer dann mit seinem normalen Standardbrowser öffnen kann [...]
Das kann ich leider nicht machen. Das hätte leider mehrere HTML-Dateien zur Folge und man müsste noch drauf achten, dass jeder Browser dasselbe anzeigt (ich sag nur Extrawurst für den IE...).

Bzgl. verschiedener Bereiche eines Bildes - das Stichwort heißt Imagemap:
Das mit der Imagemap hatte ich auch schon gelesen, nur wusste ich nicht, ob man das mit einem OnMouseOver (bzw. OnMouseClick) kombinieren kann. Geht das?

MfG Dalai
 
Das kann ich leider nicht machen. Das hätte leider mehrere HTML-Dateien zur Folge und man müsste noch drauf achten, dass jeder Browser dasselbe anzeigt (ich sag nur Extrawurst für den IE...).
mehrere HTML-Dateien macht ja nichts für den Benutzer, ob der nun auf einen Link zur CHM oder einen Link zur index.html klickt, dürfte ihm egal sein. Und wenn das Programm installiert wird, machen ein paar Dateien mehr auch nichts aus.
Das mit der Imagemap hatte ich auch schon gelesen, nur wusste ich nicht, ob man das mit einem OnMouseOver (bzw. OnMouseClick) kombinieren kann. Geht das?
Klar, dafür ist das ja hauptsächlich gedacht, was sollte man damit auch sonst noch großartig machen? Der Handler heißt übrigens onclick, ohne mouse (da man ihn ja auch z.B. mit Tab und Space auslösen kann).
 
mehrere HTML-Dateien macht ja nichts für den Benutzer, ob der nun auf einen Link zur CHM oder einen Link zur index.html klickt, dürfte ihm egal sein. Und wenn das Programm installiert wird, machen ein paar Dateien mehr auch nichts aus.
Dem Benutzer ist das egal ja, aber mir als Programmierer nicht, da mein Programm von CD/DVD laufen soll (bzw. das schon tut) und ich dort kein weiteres Unterverzeichnis bloß für die Hilfedateien machen will, kommen mehrere (HTML-)Dateien nicht in Frage. In jedem anderen Fall hätte ich nichts gegen eine Hilfe in reinem HTML.

Das mit der Imagemap hatte ich auch schon gelesen, nur wusste ich nicht, ob man das mit einem OnMouseOver (bzw. OnMouseClick) kombinieren kann. Geht das?
Klar, dafür ist das ja hauptsächlich gedacht, was sollte man damit auch sonst noch großartig machen? Der Handler heißt übrigens onclick, ohne mouse (da man ihn ja auch z.B. mit Tab und Space auslösen kann).
Hauptsächlich gedacht (oder eher genutzt) wird es wohl wie in dem Beispiel bei SelfHTML für Straßenkarten, bei denen man auf bestimmte Orte klicken kann und dann weitergeleitet wird. Naja, ich werd mir das mal ansehen, ob ich damit klar komme. Falls nicht, melde ich mich nochmal :-). Mache ich natürlich auch bei Erfolg, denn ich kann es selbst nicht leiden, wenn ein Problem im Stillen gelöst wurde und die Helfer nichts davon mitbekommen.

MfG Dalai
 
Irgendwie hab ich's noch nicht raus oder ich stell mich zu dumm an, ggf auch beides ;)

Wie und wo muss ich die (IDs der) Erklärungstexte definieren?
Muss ich für jedes Element, das erklärt werden soll, eine eigene ID machen? *noahnung*

Das hab ich bisher (verkürzt auf das Wesentliche):
HTML:
<div>
  <map name="Screenshot">
    <area shape="rect" coords="285, 40, 376, 58" href="http://www.wiesbaden.de/" alt="Wiesbaden">
    <area shape="rect" coords="392, 35, 522, 65" href="http://www.mainz.de/" alt="Mainz">
  </map>
</div>

<p><img src="screenshot_v1.7.png" width="676" height="630" alt="Screenshot" usemap="#Screenshot"></p>

MfG Dalai
 
Du brauchst zumindest eine ID für jeden Erklärtext, damit Du ihn einzeln an- und ausschalten kannst (d.h. sicht- oder unsichtbar). Am Anfang, d.h. wenn die Seite geladen wird, sind alle aus, und mit der Maus werden sie einzeln kurz angeschaltet.

Die ID "Bild" hatte ich nur reingeschrieben, um den grünen Kasten auch per CSS zu formatieren, reine Kosmetik.

PHP:
<html>
<head>
<title></title>

<style type="text/css">
<!--

#kasten_wies {
	background-color:#ffff99;
    color:#333333;
    font-family:arial;
    font-size:12px;
    font-style:italic;
    width:150px;
    border:1px solid black;
    position:absolute;
    top:150px;
    left:250px;
    visibility:hidden;
}

#kasten_mainz {
	background-color:#ffff99;
    color:#333333;
    font-family:arial;
    font-size:12px;
    font-style:italic;
    width:150px;
    border:1px solid black;
    position:absolute;
    top:250px;
    left:350px;
    visibility:hidden;
}

-->
</style>

</head>
<body>

<div>
	<map name="Screenshot">
	    <area shape="rect" coords="285, 40, 376, 58" href="http://www.wiesbaden.de/" alt="Wiesbaden" onMouseover="javascript:kasten_wies.style.visibility='visible'" onMouseout="javascript:kasten_wies.style.visibility='hidden'" />
	    <area shape="rect" coords="392, 35, 522, 65" href="http://www.mainz.de/" alt="Mainz" onMouseover="javascript:kasten_mainz.style.visibility='visible'" onMouseout="javascript:kasten_mainz.style.visibility='hidden'" />
	</map>
</div>

<p><img src="screenshot_v1.7.png" width="676" height="630" alt="Screenshot" usemap="#Screenshot"></p>

<div id="kasten_wies">Wiesbaden - Hauptstadt von Hessen</div>
<div id="kasten_mainz">Mainz - Hauptstadt von Rheinland-Pfalz</div>

</body>
</html>
 
OK, jetz schnall ich das langsam, wie sowas funzt.

Kann man die Erklärungstexte statt fest positionieren direkt unter oder meinetwegen auch neben dem Mauszeiger anzeigen lassen?

MfG Dalai
 
Ja klar, dazu mußt Du dann aber die Position des Mauszeigers auslesen (Stichwort screenX bzw. screenY) und das als Koordinaten für den Textkasten setzen, erfordert etwas mehr Javascript. Steht auch irgendwo im Selfhtml, such ich jetzt aber nicht mehr raus ;)
 
Mit screenX/Y kam ich nicht weiter, denn das Bild ist größer als die Seitenhöhe, so dass der Erklärungstext aufgrund des Scrollens in der Seite immer woanders erscheint.

So hab ich es jetzt gelöst:

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>

<style type="text/css">
<!--

#kasten_wies {
    background-color:#ffff99;
    color:#333333;
    font-family:arial;
    font-size:12px;
    width:150px;
    border:1px solid black;
    position:absolute;
    visibility:hidden;
}

#kasten_mainz {
    background-color:#ffff99;
    color:#333333;
    font-family:arial;
    font-size:12px;
    width:150px;
    border:1px solid black;
    position:absolute;
    visibility:hidden;
}

-->
</style>

</head>
<body>

<div>
    <map name="Screenshot">
        <area shape="rect" coords="285, 40, 376, 58" onMouseOver="javascript:kasten_wies.style.visibility='visible'; javascript:kasten_wies.style.top=window.event.offsetY + 40; javascript:kasten_wies.style.left=window.event.offsetX" onMouseout="javascript:kasten_wies.style.visibility='hidden'" alt="">
        <area shape="rect" coords="392, 35, 522, 65" onMouseOver="javascript:kasten_mainz.style.visibility='visible'; javascript:kasten_mainz.style.top=window.event.offsetY + 40; javascript:kasten_mainz.style.left=window.event.offsetX" onMouseout="javascript:kasten_mainz.style.visibility='hidden'"  alt="">
    </map>
</div>

<p><img src="screenshot_v1.7.png" width="676" height="630" usemap="#Screenshot" alt=""></p>

<div id="kasten_wies">Wiesbaden - Hauptstadt von Hessen</div>
<div id="kasten_mainz">Mainz - Hauptstadt von Rheinland-Pfalz</div>

</body>
</html>

Kann man dieses sich immer wiederholende 'javascript:kasten*.style.left=window.event.offsetX' irgendwie anders definieren, so dass der Quelltext übersichtlicher wird? Es geht in Richtung Overkill (und eben hässlich unübersichtlich), das bei jeder Area zu schreiben.

EDIT: Achso, kann man eine dynamische Positionierung auch für andere Browser erreichen? Das offsetX/Y ist ja Microsoft-Syntax, funktioniert also nicht im Firefox. Nicht dass ich es jetzt dafür bräuchte, aber evtl. brauch ich es für andere Sachen später.

MfG Dalai
 
Zuletzt bearbeitet:
Kann man dieses sich immer wiederholende 'javascript:kasten*.style.left=window.event.offset X' irgendwie anders definieren, so dass der Quelltext übersichtlicher wird? Es geht in Richtung Overkill (und eben hässlich unübersichtlich), das bei jeder Area zu schreiben.
Könntest es ja in eine Funktion packen und die dann mit dem Handler aufrufen, aber wesentlich kürzer würde das wohl nicht.

EDIT: Achso, kann man eine dynamische Positionierung auch für andere Browser erreichen? Das offsetX/Y ist ja Microsoft-Syntax, funktioniert also nicht im Firefox. Nicht dass ich es jetzt dafür bräuchte, aber evtl. brauch ich es für andere Sachen später.
pageX, pageY ist die vergleichbare Netscapesyntax, aber richtet sich nach der oberen linken Ecke der Seite, nicht des eventauslösenden Elements.
 
OK, ich hab lange rumfummeln müssen, um die Position der Erklärungsboxen so hinzubekommen, wie ich es wollte: unter dem Mauszeiger. Vor allem war es schwer, alle in der gleichen Höhe zu positionieren, ohne jedesmal einen anderen Wert auf die Mausposition zu addieren. Deswegen habe ich einen weiteren Abschnitt <div> mit absoluter Position erzeugt, an dem sich alle Boxen ausrichten (im HTML-Code unten als neu gekennzeichnet).

Hier nun mein Ergebnis, für den Fall, dass es mal jmd. benötigt:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>

<style type="text/css">
<!--

#kasten_wies {
    background-color:#ffff99;
    color:#333333;
    font-family:arial;
    font-size:12px;
    width:300px;
    border:1px solid black;
    position:absolute;
    visibility:hidden;
}

#kasten_mainz {
    background-color:#ffff99;
    color:#333333;
    font-family:arial;
    font-size:12px;
    width:300px;
    border:1px solid black;
    position:absolute;
    visibility:hidden;
}

-->
</style>

</head>
<body>

<div style="position:absolute">  <!-- *** das hier ist neu *** -->
  <div id="kasten_wies">Wiesbaden - Hauptstadt von Hessen</div>
  <div id="kasten_mainz">Mainz - Hauptstadt von Rheinland-Pfalz</div>
</div>                                     <!-- *** das hier ist neu *** -->

<div>
    <map name="Screenshot">
        <area shape="rect" coords="285, 40, 376, 58" alt="" onMouseOver="javascript:kasten_wies.style.visibility='visible'; javascript:kasten_wies.style.top=window.event.offsetY + 30; javascript:kasten_wies.style.left=window.event.offsetX" 
            onMouseout="javascript:kasten_wies.style.visibility='hidden'">
        <area shape="rect" coords="392, 35, 522, 65" alt="" onMouseOver="javascript:kasten_mainz.style.visibility='visible'; javascript:kasten_mainz.style.top=window.event.offsetY + 30; javascript:kasten_mainz.style.left=window.event.offsetX" 
            onMouseout="javascript:kasten_mainz.style.visibility='hidden'">
    </map>
</div>

<p><img src="screenshot_v1.7.png" width="676" height="630" alt="" usemap="#Screenshot" border="0"></p>

</body>
</html>
Man muss noch dazusagen, dass das Beispiel hier die Erklärungsboxen nur im IE (und Opera 9.x) unter der Maus positioniert, in wahrscheinlich allen anderen Browsern - vor allem bei den Gecko-basierten Browsern wie Firefox und SeaMonkey - erscheint die jeweilige Box in der linken oberen Ecke des Bild/der Imagemap.

Ich danke allen Helfern für ihre Geduld ;)
MfG Dalai
 
Zurück
Oben Unten