Hallo,
hab noch eine spezielle frage und zwar hab ich eine mousehover funktion mit grafiken gemacht, jetz wollte ich gern dass das hover auch bleibt nach dem klick, wie muss ich das anstellen??
mfg
verwendete ilchClan Version: 1.1
Hier kann eine Notiz zum Merk-Eintrag hinzugefügt werden (optional)
Geschlossen |
.boxnews a { display: block; float:Left; margin-left : 28px; width : 52px; height : 13px; background-image : url(naviboxswitch/news.png); } .boxnews a:hover { background-image : url(naviboxswitch/news_hover.png); } .boxnews a:active { background-image : url(naviboxswitch/news_hover.png); }
.boxnews a { display: block; float:Left; margin-left : 28px; width : 52px; height : 13px; background-image : url(naviboxswitch/news.png); } .boxnews a:hover { background-image : url(naviboxswitch/news_hover.png); } .boxnews a:visited { background-image : url(naviboxswitch/news_hover.png); }
<script type="text/javascript"> var boxl = 4; var chosboxl = 1; function toggleboxl (tshow) { tshow = isNaN(tshow) ? 1 : tshow; if (tshow < 1 || tshow > boxl) { tshow = (chosboxl < boxl) ? chosboxl + 1 : 1; } document.getElementById('bokx_'+chosboxl).style.display = 'none'; document.getElementById('bokx_'+tshow).style.display = ''; chosboxl = tshow; } </script> <div class="boxnews" style="margin-top:4px; margin-right:6px;"><a href="javascript:void(0);" onclick="toggleboxl(1);"></a></div> <br /> <div id="bokx_1" style="margin-top:13px; margin-left:0px;">{_boxes_lastnews}</div>
# .boxnews a:visited { # background-image : url(naviboxswitch/news_hover.png);
# .boxnews a:active { # background-image : url(naviboxswitch/news_hover.png);
.boxnews a { display: block; float:Left; margin-left : 28px; width : 52px; height : 13px; background-image : url(naviboxswitch/news.png); } .boxnews a:hover { background-image : url(naviboxswitch/news_hover.png); } .boxnews a:active { background-image : url(naviboxswitch/news_hover.png); }
body { text-align: center; background-color: #000000; background-repeat:repeat-x; background-attachment:fixed; scrollbar-face-color: #DDDDDD; scrollbar-highlight-color: #EFEFEF; scrollbar-shadow-color: #003366; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #003366; scrollbar-track-color: #EFEFEF; scrollbar-darkshadow-color: #DDDDDD; } #wrap { position: relative; width: 967px; text-align: left; margin: 0 auto 0 auto; } #top { background: url('img/top.gif'); height: 67px } #header { background: url('img/logo.gif'); height: 153px; text-align: center; vertical-align:middle } #header h1 { display: inline; position: absolute; top: 110px; left: 100px; color: #fff; font-family: 'Trebuchet MS'; font-weight: normal; font-size: 24px; } #top2 { background: url('img/top2.gif'); height: 31px } #top2 font { display: inline; position: absolute; left: 172px; margin-top: 2px; font-size: 10px; text-decoration: none; } #content { background: url('img/contentbg.gif'); background-repeat:repeat-x; background-attachment:fixed; } #footer { background: url('img/footer.gif'); height: 33px; text-align: center; vertical-align: middle } #left_col { width: 158px; float: left; padding-top: 0px; padding-left: 9px; padding-right: 18px; padding-bottom: 0px; color: #fff; overflow: hidden; } #left_col .Cmite, #left_col .Cnorm, #left_col .Cdark { color: #ff0000; } #left_col a { color: #CCCCCC; } #left_col .menu_heading { color: #000; display:block; letter-spacing: 1px; font-size: 11px; padding: 0 0 3px 5px; } #main_col { width: 440px; float: left; padding-top: 0px; padding-left: 5px; padding-right: 20px; padding-bottom: 0px; clear: none; min-height: 100px; overflow: auto; } #right_col1 { width: 141px; float: left; padding-top: 0px; padding-left: 7px; padding-right: 10px; padding-bottom: 0px; overflow: hidden; } #right_col2 { width: 141px; float: right; padding-top: 0px; padding-left: 0px; padding-right: 14px; padding-bottom: 0px; overflow: hidden; } #right_col1 .menu_heading, #right_col2 .menu_heading { color:#fff; font-size:11px; letter-spacing: 1px; } #left_col ul { padding: 0; margin: 0; width: 149px; list-style-position:inside; list-style-image:url('img/box_menu_pfeil.gif') } #left_col li { margin:0; background: url('img/box_menu_trennlinie.gif') no-repeat bottom;; padding-left:2px; padding-right:0; padding-top:5px; padding-bottom:0 } #left_col li ul { width: 146px; background: url('img/box_menu_trennlinie.gif') no-repeat top; } #left_col li li { padding-left: 16px; } #left_col li a { color: #fff; padding-left: 8px; font-size: 11px; font-weight: normal; text-decoration: none; } .boxnews a { display: block; float:Left; margin-left : 28px; width : 52px; height : 13px; background-image : url(naviboxswitch/news.png); } .boxnews a:hover { background-image : url(naviboxswitch/news_hover.png); } .boxnews a:visited { background-image : url(naviboxswitch/news_hover.png); } .boxforum a { display: block; float:Left; margin-left : 3px; width : 50px; height : 13px; background-image : url(naviboxswitch/forum.png); } .boxforum a:hover { background-image : url(naviboxswitch/forum_hover.png); } .boxloads a { display: block; float:Left; margin-left : 3px; width : 50px; height : 13px; background-image : url(naviboxswitch/loads.png); } .boxloads a:hover { background-image : url(naviboxswitch/loads_hover.png); } .boxnext a { display: block; float:Left; margin-left : 29px; width : 52px; height : 13px; background-image : url(naviboxswitch/next.png); } .boxnext a:hover { background-image : url(naviboxswitch/next_hover.png); } .boxlast a { display: block; float:Left; margin-left : 3px; width : 52px; height : 13px; background-image : url(naviboxswitch/last.png); } .boxlast a:hover { background-image : url(naviboxswitch/last_hover.png); } td { font-family: Arial; font-size: 12px; color: #FFFFFF; // Textfarbe } hr { height: 0px; border: solid #006600 0px; border-top-width: 1px; } a, #left_col .Cmite a, #left_col .Cnorm a, #left_col .Cdark a { color: #FFFFFF; // Hyperlinks font-family: Verdana; font-size: 10px; text-decoration: none; } a:hover { text-decoration: none; } a.box { color: #D2D1D1; // Hyperlinks bei login und menuepunkte font-family: Tahoma; font-size: 13px; text-decoration: none; } a.box:hover { text-decoration: none; } c { color: #696969; text-align: right; font-size: 10px; } .Chead { background-color: #273b4e; background: url(bilder/windowbar.gif) no-repeat; color: #ffffff; text-align: center; font-family: 'Arial'; font-size: 12px; } .CheaBAckup { background-color: #273b4e; background: url(bilder/navibar.gif) no-repeat; color: #696969; text-align: center; font-family: 'Arial'; font-size: 12px; } .Frage { background-color: #273b4e; background: url(Bilder/xdxdxd.gif) no-repeat; color: #b68400; } .Serverbar { background-color: #273b4e; background: url(Bilder/serverbar.gif) no-repeat; text-align: center; color: #ffffff; } .Switchboxcalender { background: url(box/boxklein2.gif) no-repeat; } .Switchboxstats { background: url(box/boxsliderklein.gif) no-repeat; } .Switchboxslider { background: url(box/boxslider.gif) no-repeat; } .Switchboxklein { background: url(box/boxklein.gif) no-repeat; } .menu:link, .menu:visited, .menu:active { display: block; color: #FFFFFF; font-size: 11px; background: url(images/button.jpg); width: 160px; height: 20px; text-indent: 15px; text-decoration: none; font-family: Arial, sans-serif; line-height: 20px; } .menu:hover { display: block; color: #FFFFFF; font-size: 11px; background:url(images/button_hover.jpg); width: 160px; height: 20px; text-indent: 15px; text-decoration: none; font-family: Arial, sans-serif; line-height: 20px; font-style: italic; } .Cx1 { background-color: #000000; } .Cx2 { color: #474747; } .Cx3 { color: #F0F8FF; } .Cx4 { background-color: #292728; } .Cx5 { background-color: #201e1f; } .Csonst { background-color: #273b4e; background: url(bilder/windowbar.gif) no-repeat; text-align: center; font-size: 11px; font-family: Tahoma; color: #959595; } .CsonstX { background-color: #000000; background: url(bilder/navibarrr.gif) no-repeat; text-align: center; font-size: 11px; color: #696969; } .Csview { background-color: #273b4e; background: url(bilder/windowbar.gif) no-repeat; text-color: #000000; color: #000000; } .Csonst2 { background-color: #273b4e; background: url(bilder/menu_bg.gif) no-repeat; color: #718296; } .Csonst3 { background-color: #273b4e; background: url(bilder/CSSource.jpg) no-repeat; color: #718296; } .Csonst4 { background-color: #273b4e; background: url(bilder/bgngt.gif) no-repeat; color: #718296; } .Cngtnavi { background-color: #000000; } .Cnavi { background-color: #000000; background: url(images/img_4.gif) repeat; color: #718296; } .Chead td, .Chead td strong, .Chead h4, .Chead td b { background: #000000; color: #ffffff; // überschriften } .Callg { background-color: #EFEFEF; color: #000000; } .Callg td { color: #000000; } .Cwhite { background-color: #e6e6e6; overflow: auto; border: solid #FFFFFF 1px; border-top-width: 1px; } .Cnorm { background-color: #494949; } .Cmite { background-color: #3d3d3d; } .Cdark2 { background-color: #aaaaaa; color:#000000; } .Cdark { background-color: #494949; } .Cxd { background-color: #494949; padding-left: 5px; } .Cheute { background-color: #292728; padding-left: 0px; } .Ctermin { background-color: #770000; padding-left: 0px; } .Ccallender { background-color: #423434; padding-left: 0px; } .rand { border: solid #696969 1px; } .smalfont { font-size: 10px; text-decoration: none; } .smalfont2 { font-size: 11px; text-decoration: none; } hr { height: 0px; border: solid #6B6B6B 0px; border-top-width: 1px; } input, textarea, select { color: #000000; font: 10px Verdana; border-color: #1D1D1D; border-width: 1px; border-style: solid; font-weight: none; text-decoration: none; background-color: #EFEFEF; .weisschrift { text-color: #FFFFFF; } .Newsbanner { background-color: #273b4e; background: url(ngtnewsbanner.gif) no-repeat; color: #b68400; } .invisible { font-family:sans-serif; font-size: 6px; color:#FFFFFF; text-align:justify; line-height:5px; filter:alpha(opacity=30); -moz-opacity:.30; opacity:.30; }
<style> .lastboxbutton { font-family: Arial; font-size: 7pt; padding: 0 1px; line-height: 12px; text-center: left; letter-spacing: 0px;} .lastboxbutton a{ font-family: Arial; font-size: 7pt; padding: 0 1px; line-height: 12px; text-decoration: none; color:#999999; background-image:url(http://www.1204.pgserver.de/include/designs/dOb/bilder/boxen/dunkel.jpg); } .lastboxbutton a:hover, .lastboxbutton a.selected{ font-family: Arial; font-size: 7pt; padding: 0 1px; line-height: 12px; color:#000000; background-image:url(http://www.1204.pgserver.de/include/designs/dOb/bilder/boxen/hell.jpg); } .lastboxbuttonaktiv { font-family: Arial; font-size: 7pt; padding: 0 1px; line-height: 12px; text-center: left; letter-spacing: 0px; } .lastboxbuttonaktiv a{ font-family: Arial; font-size: 7pt; padding: 0 1px; line-height: 12px; color:#000000; background-image:url(http://www.1204.pgserver.de/include/designs/dOb/bilder/boxen/hell.jpg); } .lastboxbuttonaktiv a:hover, .lastboxbuttonaktiv a.selected{ font-family: Arial; font-size: 7pt; padding: 0 1px; line-height: 12px; color:#000000; background-image:url(http://www.1204.pgserver.de/include/designs/dOb/bilder/boxen/hell.jpg); } </style>
<div class="lastboxbuttonaktiv"><a onfocus="if (this.blur) this.blur()" href="javascript:void(0);" onclick="toggleLatest(1);"> FORUM </a></div></td> <td width="30" height="30" align="center" valign="bottom"> <div class="lastboxbutton"><a onfocus="if (this.blur) this.blur()" href="javascript:void(0);" onclick="toggleLatest(2);"> NEWS </a></div></td> <td width="30" height="30" align="center" valign="bottom"> <div class="lastboxbutton"><a onfocus="if (this.blur) this.blur()" href="javascript:void(0);" onclick="toggleLatest(3);"> POSTS </a></div></td>
Geschlossen | ||
Zurück zu HTML, PHP, SQL,... |