Hover effekt - searchSubmit

Deutsches Forum
1

Hallo zusammen!
habe mal wieder ein Problem. Ich habe die kleine Lupe neben dem Suchfeld im Header durch ein Bild mit dem Text “Los” ersetzt. Jetzt hätte ich gerne einen mouseover effekt eingebaut. Habe versucht in der search.tpl (widget/header/search.tpl) verschiedene Code Varianten einzubauen. Das einzige was ich da hinbekommen hab, das beide Bilder bei allen hover effekten auf der Seite eingefügt worden sind. Dann hab ich versucht die oxid.css dementsprechend zu bearbeiten. Der einzige Erfolg dabei war der gleiche wie in der .tpl Datei. Die Bilder sind bei allen hover Effekten angezeigt worden. Mehr hab ich jetzt nicht zustande gebracht. Könnte mir evtl. jemand einen Hinweis geben wo solche Änderungen durchgeführt werden? Und wie sowas dann auszusehen hat?

2

hallo,
ich schon wieder… also ich komm einfach nicht weiter. Hab jetzt den ganzen Tag damit verbracht. Hab die search.tpl so geändert

[{block name="widget_header_search_form"}]
[{if $oView->showSearch() }]
    [{oxscript include="js/widgets/oxinnerlabel.js" priority=10 }]
    [{oxscript add="$( '#searchParam' ).oxInnerLabel();"}]
    <form class="search" action="[{ $oViewConf->getSelfActionLink() }]" method="get" name="search">
        <div class="searchBox">
            [{ $oViewConf->getHiddenSid() }]
            <input type="hidden" name="cl" value="search">
            [{block name="header_search_field"}]
                <label for="searchParam" class="innerLabel">[{oxmultilang ident="SEARCH" }]</label>
                <input class="textbox" type="text" id="searchParam" name="searchparam" value="[{$oView->getSearchParamForHtml()}]">
            [{/block}]
            
            <style>
a  { display:block;
             background-image:url(http://link1.png);
             width:61px; height:27px }
a:hover { background-image:url(http://link2.png); } 
           
             <input class="searchSubmit" type="submit" value="">
             </style>
         </div>
    </form>
[{/if}]
[{/block}]

Dann werden bei allen hover Effekten auf der Seite diese zwei Bilder mit angezeigt, Außer! da wo diese zwei Bilder angezeigt werden sollen. Wenn ich aber versuche das a und a:hover zu ersetzen durch z.B. searchSubmit und #searchSubmit:hover, (so wie hier beschrieben:)
http://aktuell.de.selfhtml.org/artikel/css/mouseover/#a4
wird gar kein Bild mehr angezeigt. Hab auch mal li:hover probiert, eine kleine Änderung ist da schon zu erkennen, allerdings auch nicht das was ich will, versteh da den Zusammenhang irgendwie nicht…
Hab gelesen das man sowas durch kleine Änderungen in der oxid.css machen kann. Auch da hab ich alle möglichen Varianten probiert. Angefangen damit es genau so anzulegen wie andere hover Effekte angelegt sind, leider auch ohne Erfolg. Dann über ändern in der .tpl Datei und in der oxid.css, auch ohne Erfolg. Jetzt gehen mir langsam die Ideen aus woran es liegen könnte. Wäre wirklich für jede Hilfe dankbar!!

3

also ich habe es jetzt so lösen können

[{block name="widget_header_search_form"}]
[{if $oView->showSearch() }]
    [{oxscript include="js/widgets/oxinnerlabel.js" priority=10 }]
    [{oxscript add="$( '#searchParam' ).oxInnerLabel();"}]
    <form class="search" action="[{ $oViewConf->getSelfActionLink() }]" method="get" name="search">
        <div class="searchBox">
            [{ $oViewConf->getHiddenSid() }]
            <input type="hidden" name="cl" value="search">
            [{block name="header_search_field"}]
                <label for="searchParam" class="innerLabel">[{oxmultilang ident="SEARCH" }]</label>

                <input class="textbox" type="text" id="searchParam" name="searchparam" value="[{$oView->getSearchParamForHtml()}]">
            [{/block}]
          
          <style type="text/css">
img.einbild {background-image: url(link1.png);
  width:61px;height:27px; }
img.einbild:hover {background-image: url(link2.png);
  width:61px;height:27px; }
 </style>

<a href="url/index.php?stoken=42BA8BEE&lang=0&cl=search&searchparam="><img src="blind.gif" width="61" height="27" class="einbild" id="einbild" /> 


        [{*  <input class="searchSubmit" type="submit" value="">  *}]
     
         </div>
    </form>
[{/if}]
[{/block}]

allerdings hab ich da irgendwie ein Problem mit dem Link, wenn man das so sagen kann…url/index.php?stoken=42BA8BEE&lang=0&cl=search&searchparam=
scheint irgendwas nicht mit zu stimmen. Wenn mir jetzt jemand sagen könnte was ich dort eintragen kann wäre Super!!

Jetzt hab ich so meine Zweifel ob das überhaupt funktioniert, ein Link ist das ganze ja nicht wirklich oder?

4

Guten Morgen,

also, einfach gesagt willst du das Bild zum Suche-Absenden beim hovern ändern?

Dann mach das doch einfach per CSS und trage folgendes in die CSS-Datei des Shops (unter out/themename/src/css zu finden):


div.searchBox input.searchSubmit:hover {
    background: url(../../img/search-iconmitcoolenhovereffekt.png) no-repeat 3px;
}

Das search-iconmitcoolenhovereffekt.png speicherst du im Ordner out/themename/img. Fertig! :wink:

5

So einfach ist das? Ich werd wahnsinnig, funktioniert einwandfrei. Ich Danke dir! Vielen vielen Dank!