← HTML + CSS

Html image mouseover

Lida 20270 vezes

Offline

NunoF 
Membro
Mensagens 257 Gostos 6
Feedback +7

Troféus totais: 21
Trófeus: (Ver todos)
Mobile User Apple User Linux User Super Combination Combination Topic Starter Poll Voter Level 3 Level 2 Level 1

Já soube como fazer isto, mas já não me lembro. Basicamente o que eu quero é o que está no footer deste site wpbeginner.com

Obrigado
Offline

yanko 
Membro
Mensagens 59 Gostos 0
Troféus totais: 16
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 3 Level 2 Level 1 50 Posts 10 Posts First Post Karma

?! A secção do "Built In"?!

Via CSS...

#footer a.footmaxcdn {
  background: url("images/builtwithsprite.png") repeat scroll -155px -17px transparent;
}

#footer a.footmaxcdn:hover {
  background: url("images/builtwithsprite_hover.png") repeat scroll -155px -17px transparent;
}

Via JS com jQuery > http://api.jquery.com/hover/

Offline

NunoF 
Membro
Mensagens 257 Gostos 6
Feedback +7

Troféus totais: 21
Trófeus: (Ver todos)
Mobile User Apple User Linux User Super Combination Combination Topic Starter Poll Voter Level 3 Level 2 Level 1

?! A secção do "Built In"?!

Via CSS...

#footer a.footmaxcdn {
  background: url("images/builtwithsprite.png") repeat scroll -155px -17px transparent;
}

#footer a.footmaxcdn:hover {
  background: url("images/builtwithsprite_hover.png") repeat scroll -155px -17px transparent;
}

Via JS com jQuery > http://api.jquery.com/hover/



Sim é a secção "built with:"
Vou testar
Offline

NunoF 
Membro
Mensagens 257 Gostos 6
Feedback +7

Troféus totais: 21
Trófeus: (Ver todos)
Mobile User Apple User Linux User Super Combination Combination Topic Starter Poll Voter Level 3 Level 2 Level 1

Existe alguma maneira de fazer isso com html?
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Porque html se deves usar CSS? :S

Procura no google por css sprite.
Offline

NunoF 
Membro
Mensagens 257 Gostos 6
Feedback +7

Troféus totais: 21
Trófeus: (Ver todos)
Mobile User Apple User Linux User Super Combination Combination Topic Starter Poll Voter Level 3 Level 2 Level 1

Porque html se deves usar CSS? :S

Procura no google por css sprite.

Porque eu pretendo colocar isto num widget  :-k
Offline

GhostMaster 
Membro
Mensagens 1374 Gostos 0
Feedback +10

Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 1000 Posts

CSS sprite para que?

Consegues com isto:

    opacity: 0.7;
    /* para o IE */
    filter:alpha(opacity=70);


Hoover:

    opacity: 1;
    /* para o IE */
    filter:alpha(opacity=100);

Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

CSS sprite para que?

Consegues com isto:

    opacity: 0.7;
    /* para o IE */
    filter:alpha(opacity=70);


Hoover:

    opacity: 1;
    /* para o IE */
    filter:alpha(opacity=100);



Nada a ver, isso apenas muda a opacidade e nem funciona nos browser todos correctamente. O que está no wpbeginner é em tons de cinza e o hover é a cor.

Porque eu pretendo colocar isto num widget  :-k


Dá para fazer na mesma, só precisas de adicionar o css ao style.css do theme. Ou então adicionas css no widget: <style>CSS AQUI</style>.
Offline

GhostMaster 
Membro
Mensagens 1374 Gostos 0
Feedback +10

Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 1000 Posts

Nada a ver, isso apenas muda a opacidade e nem funciona nos browser todos correctamente. O que está no wpbeginner é em tons de cinza e o hover é a cor.

Dá para fazer na mesma, só precisas de adicionar o css ao style.css do theme. Ou então adicionas css no widget: <style>CSS AQUI</style>.

Tens razão Pedro, não tinha reparado nisso. :-?
Offline

NunoF 
Membro
Mensagens 257 Gostos 6
Feedback +7

Troféus totais: 21
Trófeus: (Ver todos)
Mobile User Apple User Linux User Super Combination Combination Topic Starter Poll Voter Level 3 Level 2 Level 1

?! A secção do "Built In"?!

Via CSS...

#footer a.footmaxcdn {
  background: url("images/builtwithsprite.png") repeat scroll -155px -17px transparent;
}

#footer a.footmaxcdn:hover {
  background: url("images/builtwithsprite_hover.png") repeat scroll -155px -17px transparent;
}

Via JS com jQuery > http://api.jquery.com/hover/



Coloquei este código e não deu:
Código: [Seleccione]
<style>#footer a.footmaxcdn {
  background: url("http://estudantevirtual.com/wp-content/uploads/2011/12/footerq4k1.png") repeat scroll -155px -17px transparent;
}

#footer a.footmaxcdn:hover {
  background: url("http://estudantevirtual.com/wp-content/uploads/2011/12/footerq4k2.png") repeat scroll -155px -17px transparent;
}</style>
Offline

Nuno 
Administrador
Mensagens 7780 Gostos 216
Feedback +2

Troféus totais: 42
Trófeus: (Ver todos)
100 Poll Votes Level 7 Search Mobile User Level 6 Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes

http://kyleschaeffer.com/best-practices/pure-css-image-hover/

Podes fazer com sprites ou não, mas é melhor pois é menos um request que tens.
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

E a classe "footmaxcdn" existe no HTML?
Offline

NunoF 
Membro
Mensagens 257 Gostos 6
Feedback +7

Troféus totais: 21
Trófeus: (Ver todos)
Mobile User Apple User Linux User Super Combination Combination Topic Starter Poll Voter Level 3 Level 2 Level 1

Já consegui com este código o efeito pretendido:
Código: [Seleccione]
<a class="myButtonLink" href="http://www.quest4k.com/" rel="nofollow">Leaf</a>
<style>.myButtonLink {
display: block;
width: 139px;
height: 59px;
background: url('http://estudantevirtual.com/wp-content/uploads/2011/12/quest4kfooter.png') bottom;
text-indent: -99999px;
}
.myButtonLink:hover {
background-position: 0 0;
}</style>

No entanto, quando repeti o código (quero 2 banners a fazerem isto) só funcionou o 1º. Alguém sabe como resolver?
Offline

NunoF 
Membro
Mensagens 257 Gostos 6
Feedback +7

Troféus totais: 21
Trófeus: (Ver todos)
Mobile User Apple User Linux User Super Combination Combination Topic Starter Poll Voter Level 3 Level 2 Level 1

Deixo aqui print e o código utilizado:



Código: [Seleccione]
<a class="myButtonLink" href="http://redlinepctech.com/pt/" rel="nofollow">Leaf</a>
<style>.myButtonLink {
display: block;
width: 300px;
height: 59px;
background: url('http://estudantevirtual.com/wp-content/uploads/2011/12/redlinepctechfooter.png') bottom;
text-indent: -99999px;
}
.myButtonLink:hover {
background-position: 0 0;
}</style>
<a class="myButtonLink" href="http://www.quest4k.com/" rel="nofollow">Leaf</a>
<style>.myButtonLink {
display: block;
width: 139px;
height: 59px;
background: url('http://estudantevirtual.com/wp-content/uploads/2011/12/quest4kfooter.png') bottom;
text-indent: -99999px;
}
.myButtonLink:hover {
background-position: 0 0;
}</style>
Offline

NunoF 
Membro
Mensagens 257 Gostos 6
Feedback +7

Troféus totais: 21
Trófeus: (Ver todos)
Mobile User Apple User Linux User Super Combination Combination Topic Starter Poll Voter Level 3 Level 2 Level 1

up