haberl92
Goto Top

Hover-Effekt bei HTA-Anwendung

Hallo zusammen,

ich bin gerade dabei mir eine kleine HTA-Anwendung zu schreiben und ich möchte ein bzw. mehrere Buttons(Images) mit einen Hover-Effekt versehen.

Mein Ziel ist es, dass das Bild beim drüber hovern etwas größer wird.

Ich habe dazu auch schon sehr viele Variationen von "Google" getestet,
aber anscheinend funktionieren die nur in HTML und nicht bei HTA.

Gibt es eine Möglichkeit dies in einer HTA umzusetzen?


Schon mal vielen Dank für eure Hilfe

Content-Key: 3931968936

Url: https://administrator.de/contentid/3931968936

Printed on: April 26, 2024 at 21:04 o'clock

Member: michi1983
michi1983 Sep 14, 2022 at 07:21:10 (UTC)
Goto Top
Hallo,

solltest du mit CSS eigentlich bewerkstelligen können:
https://stackoverflow.com/questions/8219361/css3-support-for-hta

Gruß
Mitglied: 3803037559
Solution 3803037559 Sep 14, 2022 updated at 08:48:39 (UTC)
Goto Top
Moin.
<html>
<head>
<title>My Button</title>
<HTA:APPLICATION
  APPLICATIONNAME="My HTML application"  
  ID="MyHTMLapplication"  
  VERSION="1.0"/>  
  <meta http-equiv="x-ua-compatible" content="ie=9">  
</head>
<style type="text/css">  
body {
	margin:20px auto;
	text-align:center;
}
#btn {
	width:100px;
	box-shadow:2px 2px 5px;
}
#btn:hover {
	transform: scale(1.2);
}
#btn:active {
	box-shadow:2px 2px 5px yellow;
}
</style>
<script language="jscript">  
function WindowLoad(){
	window.resizeTo(300,300);
}
function ButtonClick(){
	alert('You clicked me');  
}
</script>

<body bgcolor="white" onload="WindowLoad()">  
<div>
	<img id="btn" src="https://domain.tld/images/t/2021/04/06/windows10-240-1053790104.jpg" onClick="ButtonClick()" />  
</div>
</body>
</html>
Cheers
certguy
Member: Haberl92
Haberl92 Sep 14, 2022 at 09:14:21 (UTC)
Goto Top
Zitat von @3803037559:

Moin.
<html>
<head>
<title>My Button</title>
<HTA:APPLICATION
  APPLICATIONNAME="My HTML application"  
  ID="MyHTMLapplication"  
  VERSION="1.0"/>  
  <meta http-equiv="x-ua-compatible" content="ie=9">  
</head>
<style type="text/css">  
body {
	margin:20px auto;
	text-align:center;
}
#btn {
	width:100px;
	box-shadow:2px 2px 5px;
}
#btn:hover {
	transform: scale(1.2);
}
#btn:active {
	box-shadow:2px 2px 5px yellow;
}
</style>
<script language="jscript">  
function WindowLoad(){
	window.resizeTo(300,300);
}
function ButtonClick(){
	alert('You clicked me');  
}
</script>

<body bgcolor="white" onload="WindowLoad()">  
<div>
	<img id="btn" src="https://domain.tld/images/t/2021/04/06/windows10-240-1053790104.jpg" onClick="ButtonClick()" />  
</div>
</body>
</html>
Cheers
certguy

Vielen Dank. Ich habe das Script so wie es ist, getestet und es funktioniert. Ich werde es heute nachmittag mit meinen Script zusammen basteln. Ich hoffe, dass es da genau so funktioniert.
Member: Haberl92
Haberl92 Sep 14, 2022 at 20:55:15 (UTC)
Goto Top
Das mit den Hovern hat wunderbar funktioniert.
Mir fehlte anscheinend nur eine Zeile:
  <meta http-equiv="x-ua-compatible" content="ie=9">  

Nun ist es aber so, wenn ich die Zeile einfüge, dann funktioniert das Hovern wunderbar, jedoch kann ich bei ein bzw. mehreren tables die border nicht mehr unsichtbar machen.

Wenn ich die Zeile wieder raus nehme, sind die TableBorder wieder unsichtbar, aber das Hovern funktioniert nicht mehr.

Mir ist unklar wieso das zusammen hängt.
Weiß jemand dafür eine Lösung?
Member: michi1983
michi1983 Sep 14, 2022 at 21:25:27 (UTC)
Goto Top
Dazu müsste man deine HTML und dein CSS kennen.

Gruß
Member: Haberl92
Haberl92 Sep 14, 2022 at 21:36:56 (UTC)
Goto Top
Zitat von @michi1983:

Dazu müsste man deine HTML und dein CSS kennen.

Gruß

Hier ist der Code:
(bitte über Formatierung nicht nachdenken. Ist meine erste HTML-Datei)

<html>
   <head>
      <title>WebAPP</title>
      <HTA:APPLICATION
         APPLICATIONNAME="WebAPP"  
         SINGLEINSTANCE="yes"  
         WINDOWSTATE="maximize"  
         contextmenu="no"  
         caption="yes"  
         icon="images\azh_rund_symbol.ico"  
         innerborder="no"  
         navigable="yes"  
         scroll="auto"  
         scrollflat="no"  
         selection="no"  
         VERSION="1.0"/>  
      <meta http-equiv="x-ua-compatible" content="ie=9">  
   </head>
   <html>
      <head>
         <style type="text/css">  
            body {
            scrollbar-base-color:#c4358d;
            scrollbar-arrow-color:#c4358d;
            scrollbar-shadow-color:#c4358d;
            scrollbar-darkshadow-color:#......;
            scrollbar-face-color:#......;
            scrollbar-highlight-color:#......;
            scrollbar-3dlight-color:#c4358d;
            scrollbar-track-color:#......;
            }
            #btn:hover {
            transform: scale(1.1);
            }
         </style>
      </head>
      <!--GUI-->
      <body background="images\background.png" bgproperties=fixed>  
         <div style="float:left; width: 600px; margin-top: 0px">  
         </div>
         <div style="float:right;">  
            <img src="images\logo.png" height="60" width="400">  
         </div>
         <font face="Verdana" style="font-size:20px">  
         <br><br><br>
         <hr>
         <br><br><br><br>
         <div>
            <h1 style="color:#1f394e" align="center" face="Verdana" style="font-size:40px"><u>Bereich ausw&#228;hlen:</u></h1>  
         </div>
         <br>
         <br>
         <br>
		 <!--dieser Bereich sollte eigentlich in einer Tabelle stehen-->
         <div align="center">  
            <a id="btn" href="DocView.hta"><img border="0" src="images\docs_rund.png" height="250" width="250" /></a>  
            &emsp;&emsp;&emsp;<a id="btn" href="Schichtplan.hta"><img border="0" src="images\plan_rund.png" height="250" width="250" /></a>  
            &emsp;&emsp;&emsp;<a id="btn" href="BatchAuswahl.hta"><img border="0" src="images\cmd_rund.png" height="250" width="250" /></a>  
         </div>
         <h2 style="color:#1f394e" align="center" face="Verdana" style="font-size:10px">Dokumente&emsp;&emsp;&emsp;&emsp;Schichtplan&emsp;&emsp;&emsp;&emsp;Batch-Jobs</h2>  
         <font face="Verdana" style="font-size:30px">  
		 <!--ENDE Tabelle-->
         <style type="text/css">  
            .tg  {border-collapse:collapse;border-spacing:0;}
            .tg td{font-family:Verdana, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
            .tg th{font-family:Verdana, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
            .tg .tg-82n4{font-size:14px;font-family:Verdana, Geneva, sans-serif !important;;color:#e6e6e6;text-align:left}
         </style>
         <table align="center" class="tg" border width=900 height=100 border bgcolor=#c4358d>  
            <tr>
               <th class="tg-82n4">  
                  <font face="Verdana" style="font-size:24px" style="color:#e6e6e6"><u><b>Arbeitsanweisungen:</b></u><br>  
                  <a><font face="Verdana" style="font-size:17px" style="color:#e6e6e6">  
                  - Beispielanweisung
                  <br>
                  - Beispielanweisung
                  <br>
                  <br>
                  <br>
                  </a>
               </th>
            </tr>
         </table>
      </body>
      <!--Fußzeile-->
      <font face="Verdana" style="font-size:10px">  
      <div style="float:right; width: 90px;">  
         &#169; by Haberl
      </div>
   </html>

Ich hab keine extra CSS-Datei. Mir reicht es so.
Member: Haberl92
Haberl92 Sep 14, 2022 at 21:38:53 (UTC)
Goto Top
das ist der alternative Code ohne Tabelle, da ich den anderen Versuch wieder verworfen habe, wegen der Border.
Der Bereich was aber in einer Tabelle stehen sollte ist im Code markiert.
Member: Haberl92
Haberl92 Sep 14, 2022 at 22:17:30 (UTC)
Goto Top
Habe es jetzt doch hinbekommen. Habe ganz übersehen, dass ich weiter unten noch eine Tabelle hatte und die CSS Eigenschaften wurden dadurch überschrieben.

Vielen Dank für euere Hilfe
Mitglied: 3803037559
3803037559 Sep 15, 2022 updated at 07:42:57 (UTC)
Goto Top
Ist meine erste HTML-Datei
Autsch, das sieht man leider, das ist HTML aus dem letzten Jahrhundert face-smile.
font face
Nutzt heute u.a. keine Sau mehr face-wink.
Member: Haberl92
Haberl92 Sep 16, 2022 at 22:52:45 (UTC)
Goto Top
Nun habe ich doch noch ein Problem:

Mit der Zeile:
<meta http-equiv="x-ua-compatible" content="ie=9">  
funktioniert der Hover-Effekt nicht mehr. Gibt es da Alternativen?
Mitglied: 3803037559
3803037559 Sep 17, 2022 updated at 06:27:12 (UTC)
Goto Top
Zitat von @Haberl92:
Mit der Zeile:
<meta http-equiv="x-ua-compatible" content="ie=9">  
funktioniert der Hover-Effekt nicht mehr. Gibt es da Alternativen?

Geht hier einwandfrei im Test. Das liegt bei dir wie gesagt an deinem dermaßen veralteten Zeuch was du da eingefügt hast.
Member: Haberl92
Haberl92 Sep 17, 2022 at 08:41:06 (UTC)
Goto Top
Zitat von @Haberl92:

Nun habe ich doch noch ein Problem:

Mit der Zeile:
<meta http-equiv="x-ua-compatible" content="ie=9">  
funktioniert der Hover-Effekt nicht mehr. Gibt es da Alternativen?

Hab mich verschrieben.

Der Hover Effekt funktioniert einwandfrei, jedoch funktionieren mit der Zeile keine VBscripte mehr...
Mitglied: 3803037559
3803037559 Sep 17, 2022 updated at 08:50:08 (UTC)
Goto Top
Zitat von @Haberl92:
jedoch funktionieren mit der Zeile keine VBscripte mehr...
Das ist normal, die musst du bei Verwendung des Meta-Tags auf JavaScript portieren. Das kann alles was VBScript kann und noch wesentlich mehr.
Member: Haberl92
Haberl92 Sep 17, 2022 at 10:02:08 (UTC)
Goto Top
Mit JavaScript habe ich noch nie was gemacht.

Wie würde das in der HTML aussehen, wenn ich damit eine CMD starten möchte?
Mitglied: 3803037559
3803037559 Sep 17, 2022 updated at 11:06:17 (UTC)
Goto Top
Zitat von @Haberl92:
Wie würde das in der HTML aussehen, wenn ich damit eine CMD starten möchte?

<html>
  <head>
    <title>My Button</title>
    <HTA:APPLICATION APPLICATIONNAME="My HTML application" ID="MyHTMLapplication" VERSION="1.0" />  
      <meta http-equiv="x-ua-compatible" content="ie=9" />  
      <style type="text/css">  
      body {
        margin:20px auto;
        text-align:center;
      }
      #btn {
        width:100px;
        box-shadow:2px 2px 5px;
      }
      #btn:hover {
        transform: scale(1.2);
      }
      #btn:active {
        box-shadow:2px 2px 5px yellow;
      }
      </style>
      <script language="jscript">  
      function WindowLoad(){
        window.resizeTo(300,300);
      }
      function ButtonClick(){
        var objShell = new ActiveXObject("Wscript.Shell");  
        objShell.Run("cmd /c \"echo Test &pause\"",1,0);  
      }
    </script>
  </head>
  <body bgcolor="white" onload="WindowLoad()">  
    <div>
      <img id="btn" src="https://domain.tld/images/t/2021/04/06/batch-240-1101995812.jpg" onClick="ButtonClick()" />  
    </div>
  </body>
</html>
Member: Haberl92
Haberl92 Sep 17, 2022 at 11:06:00 (UTC)
Goto Top
Vielen Dank.

Nur noch eine Frage. In dem Script wird jetzt nur ein Befehl von CMD ausgeführt. Aber kann ich damit auch eine externe CMD starten, also den Pfad eingeben?

Ich weiß, dass es mit den CMD Befehl "start" gehen würde, aber kann das Javascript nicht selber?
Mitglied: 3803037559
Solution 3803037559 Sep 17, 2022 updated at 11:11:13 (UTC)
Goto Top
Zitat von @Haberl92:
Nur noch eine Frage. In dem Script wird jetzt nur ein Befehl von CMD ausgeführt. Aber kann ich damit auch eine externe CMD starten, also den Pfad eingeben?
Sicher einfach die Befehle durch den Skriptpfad ersetzen ...
objShell.Run('C:\pfad\script.cmd',1,0);  
Ist gleich zu VBS nur eben nach JavaScript Syntax
Run Method (Windows Script Host)
Member: Haberl92
Haberl92 Sep 17, 2022 at 11:16:53 (UTC)
Goto Top
Zitat von @3803037559:
Sicher einfach die Befehle durch den Skriptpfad ersetzen ...
objShell.Run('C:\pfad\script.cmd',1,0);  
Ist gleich zu VBS nur eben nach JavaScript Syntax
Run Method (Windows Script Host)

Das ist super. Vielen Dank

Ich werde mich dann demnächst auch mal mehr mit JavaScript auseinander setzen müssen.

Später werde ich das in mein Script einbauen und hier nochmal berichten, ob alles funktioniert.
Member: Haberl92
Haberl92 Sep 17, 2022 at 19:14:52 (UTC)
Goto Top
Es hat alles super geklappt.

Nun noch eine allerletzte Frage:

Wie kann ich eine Usereingabe von der HTA als eine Textdatei speichern?

Mein ursprünglicher VBS Code war folgender:
    Sub SaveData
        Set objFSO = CreateObject("Scripting.FileSystemObject")  
        If objFSO.FileExists("W:\Haberl\LK.txt") Then  
           Set objFile = objFSO.OpenTextFile("W:\Haberl\LK.txt", 8)  
            strLine = Keyword.Value & vbTab
            objFile.WriteLine strLine
            objFile.Close
        Else
            Set objFile = objFSO.CreateTextFile("W:\Haberl\LK.txt")  
            strLine = keyword.Value & vbTab
            objFile.WriteLine strLine
            objFile.Close
        End If
Mitglied: 3803037559
3803037559 Sep 18, 2022 updated at 06:34:05 (UTC)
Goto Top
Mal wieder never ending story, ich sag's ja ....
function SaveData(){
    var fso = new ActiveXObject("Scripting.FileSystemObject");  
    var keyword = document.getElementById('keyword').value;  
    var file = fso.OpenTextfile('W:\Haberl\LK.txt',8,true);  
    file.WriteLine(keyword + "\t");  
    file.close();
}
Over and out ...
Member: Haberl92
Haberl92 Sep 18, 2022 at 11:47:21 (UTC)
Goto Top
Zitat von @3803037559:

Mal wieder never ending story, ich sag's ja ....
function SaveData(){
    var fso = new ActiveXObject("Scripting.FileSystemObject");  
    var keyword = document.getElementById('keyword').value;  
    var file = fso.OpenTextfile('W:\Haberl\LK.txt',8,true);  
    file.WriteLine(keyword + "\t");  
    file.close();
}
Over and out ...

Ich danke dir vielmals.
Ich habe dazu auch einen extra Thread gemacht, aber da bekam ich nur zur Antwort, dass HTML ja nichts auf Datenträger schreiben darf... Aber es handelts sich ja hier um HTA...
Ich werde deine Antwort auch in dem anderen Thread posten, damit dieser geschlossen werden kann.