14.09.2022, aktualisiert um 15:40:08 Uhr

2494

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

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 3931968936

Url: https://administrator.de/forum/hover-effekt-bei-hta-anwendung-3931968936.html

Ausgedruckt am: 31.12.2024 um 09:12 Uhr

21 Kommentare

Neuester Kommentar

Hallo,

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

Gruß

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

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.

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?

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

Gruß

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.

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.

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

Ist meine erste HTML-Datei

Autsch, das sieht man leider, das ist HTML aus dem letzten Jahrhundert

font face

Nutzt heute u.a. keine Sau mehr

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?

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.

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

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.

Mit JavaScript habe ich noch nie was gemacht.

Wie würde das in der HTML aussehen, wenn ich damit eine CMD starten möchte?

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>

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?

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)

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.

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

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

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.

gelöst Frage HTML Entwicklung

Mehr von Haberl92

Besitzrechte bei verschiedenen Festplatten automatischHaberl92 - 4 Kommentare

Hilfe bei XML bearbeiten mit PowerShellHaberl92 - 25 Kommentare

Mit JS explorer.exe startenHaberl92 - 14 Kommentare

Mit Javascript Variable als txt speichern - HTAHaberl92 - 4 Kommentare

Heiß diskutiert