html - Image-menu with hover-effect with one image only? -


i've built site typo3 (4.7.2) has nice graphical menu on right hand side (see here). not user-friendly nor easy maintain, bit of hack , doesn't use "typo3-standards", general html/css-hacking:

the menu's html is:

<p id="kat">  <a target="_blank" href="http://www.fusspflege.com/elkat/op/">   <img src="/fileadmin/images/baehr_katalog2.png" />  </a> </p>

and corresponding css:

  #kat {     background: url("/fileadmin/images/baehr_katalog2_hover.png") no-repeat;     display:block; height:120px; width:220px; /* linkbereich begrenzen */   }    #kat img {     display:block; width:220px; height:120px; border:0;   }    #kat a:hover img {     visibility: hidden;   }

so show image white font in "standard mode" , when mouse hovers, image hidden , same image (with black font) in background becomes visible. thought quite nice, , did not need js :-)

but i'm wondering if there way more elegant, robust , user-friendly (perhaps typo's tools?), user change images if needed without having worry css...

edit: found solution requiring 1 image! (text in transparent colour , css has this:

  #kat a:hover img {     background-color: black;   }

but still wonder if there's not more typo-esque solution around? ;-)

if don't use text links (only image) able switch properties this:

#kat {      text-decoration: none;      display: block;      width: 220px;  }  #kat img {      border: 0;      max-width: 100%;      height: auto;      display: block;      opacity: .5;  }    #kat a:hover img {      opacity: 1;      transition: opacity 1s ease 0s;  }
<p id="kat">      <a target="_blank" href="http://www.fusspflege.com/elkat/op/">          <img src="http://lorempixel.com/440/220"/>      </a>  </p>


Comments

Post a Comment

Popular posts from this blog

cakephp - simple blog with croogo -

i not problem, made simple blog in croogo, problem is not adding or modifying or delete, because arabic language ?? function add in controller `public function admin_add() { $this->set('title_for_layout', __('add part')); if (!empty($this->request->data)) { $this->part->create(); if ($this->part->save($this->request->data)) { $this->session->setflash(__('the part has been saved'), 'default', array('class' => 'success')); $this->redirect(array('action' => 'index'));//, $this->part->id)); } else { $this->session->setflash(__('the part not saved. please, try again.'), 'default', array('class' => 'error')); } } }` => model `class part extends appmodel { public $name = 'part'; var $belongst...
Read more

How to group boxplot outliers in gnuplot -

i have large set of data points. try plot them boxplot, of outliers exact same value , represented on line beside each other. found how set horizontal distance between outliers in gnuplot boxplot , doesn't much, apparently not possible. is possible group outliers together, print 1 point , print number in brackets beside indicate how many points there are? think make more readable in graph. for information, have 3 boxplots 1 x value , times 6 in 1 graph. using gnuplot 5 , played around pointsize, doesn't reduce distance anymore. hope can help! edit: set terminal pdf set output 'dat.pdf' file0 = 'dat1.dat' file1 = 'dat2.dat' file2 = 'dat3.dat' set pointsize 0.2 set notitle set xlabel 'x' set ylabel 'y' header = system('head -1 '.file0); n = words(header) set xtics ('' 1) set [i=1:n] xtics add (word(header, i) i) set style data boxplot plot file0 using (1-0.25):1:(0.2) boxplot lw 2 lc rgb '#8b0000...
Read more

bash - Performing variable substitution in a string -

i have string contains use of variable, , i'd substitute variable's value string. right best have is #!/bin/bash foo='$name; echo bar' name="the name" expanded="$(eval echo "$foo")" echo "$expanded" which has obvious defects: prints the name bar while i'd print the name; echo bar instead of eval can bash's regex matching bash's string replacement: foo='$name; echo bar' name="the name" [[ "$foo" =~ \$([[:alnum:]]+) ]] && s="${!bash_rematch[1]}" && expanded="${foo/\$${bash_rematch[1]}/$s}" echo "$expanded" name; echo bar
Read more