Permalänk

Earth Hour-Temasida

Hej allihopa! Jag arbetar med att göra om hemsidan lite grann för Earth Hour, problemet är att jag inte kan jQuery.
Jag ska göra en ficklampa som när du svävar över vissa objekt på sidan, visar dessa objekt. Dock bara det som visas, så t.ex. bara en bit av en bild och inte hela bilden.
Läget ligger till såhär: Jag har löst hur jag ska göra så att ficklampan fungerar även på bilder, men bilden visar sig inte. Har ni någon bra lösning på problemet?
Någon duktig på jQuery som kan lösa mitt problem? Saken är den att jag vet hur jag kan lösa det men kan inte jQuery så det blir svårt. Det ni ska hjälpa mig med:
Fixa så att "ficklampan" är 30% transparent, detta via jQuery. Ficklampan är bara 250 X 250 px och det är just det området det transparenta ska vara 30%, resten ska vara 0% transparent. OM NI KAN så fixa så att allt under själva ficklampan är 0% transparent medan det under är 100% transparent.
-- OBS: VET ATT JAG ANVÄNDER <CENTER>, SNABB LÖSNING --
JSFiddle: http://jsfiddle.net/f3Yae/

Visa signatur

Varför använda en dålig attityd? Det är en så onödig sak!
Min hemsida hittar du på tommielag.se

Permalänk
Medlem
Skrivet av tommielag:

Hej allihopa! Jag arbetar med att göra om hemsidan lite grann för Earth Hour, problemet är att jag inte kan jQuery.
Jag ska göra en ficklampa som när du svävar över vissa objekt på sidan, visar dessa objekt. Dock bara det som visas, så t.ex. bara en bit av en bild och inte hela bilden.
Läget ligger till såhär: Jag har löst hur jag ska göra så att ficklampan fungerar även på bilder, men bilden visar sig inte. Har ni någon bra lösning på problemet?
Någon duktig på jQuery som kan lösa mitt problem? Saken är den att jag vet hur jag kan lösa det men kan inte jQuery så det blir svårt. Det ni ska hjälpa mig med:
Fixa så att "ficklampan" är 30% transparent, detta via jQuery. Ficklampan är bara 250 X 250 px och det är just det området det transparenta ska vara 30%, resten ska vara 0% transparent. OM NI KAN så fixa så att allt under själva ficklampan är 0% transparent medan det under är 100% transparent.
-- OBS: VET ATT JAG ANVÄNDER <CENTER>, SNABB LÖSNING --
JSFiddle: http://jsfiddle.net/f3Yae/

Du verkar ju hittat denna lösningen då din kod är väldigt lik http://www.mantlelabs.com/flashlight/
Du tar ju bara en transparent bakgrundsbild som bakgrund och fyller resten med background-color. Känns som du är väldigt nära lösningen.
Verkar mycket lättare att lösa det så än med ren jQuery.

Permalänk
Skrivet av agentq15:

Du verkar ju hittat denna lösningen då din kod är väldigt lik http://www.mantlelabs.com/flashlight/
Du tar ju bara en transparent bakgrundsbild som bakgrund och fyller resten med background-color. Känns som du är väldigt nära lösningen.
Verkar mycket lättare att lösa det så än med ren jQuery.

Jo men kommer inte på en lösning, har du någon snabb? Saken är den att jag inte vill att allt ska vara svart utan saker och ting är rosa och grönt etc etc.

Visa signatur

Varför använda en dålig attityd? Det är en så onödig sak!
Min hemsida hittar du på tommielag.se

Permalänk
Medlem
Skrivet av tommielag:

Jo men kommer inte på en lösning, har du någon snabb? Saken är den att jag inte vill att allt ska vara svart utan saker och ting är rosa och grönt etc etc.

Byt background-color till färgen du vill ha och kör opacity: 0.9; eller liknande på div:en. Då borde det du inte lyser på vara lite helt synligt och det runt om lite mindre synligt om du har en bakgrundsbild med mer transparency. Gör den transparenta bilden till samma färg som background-color så smälter dom ihop.

Permalänk
Skrivet av agentq15:

Byt background-color till färgen du vill ha och kör opacity: 0.9; eller liknande på div:en. Då borde det du inte lyser på vara lite helt synligt och det runt om lite mindre synligt om du har en bakgrundsbild med mer transparency. Gör den transparenta bilden till samma färg som background-color så smälter dom ihop.

Okej, tack för tipsen. Gjorde som du beskrev och det är nu live på http://tommielag.se

Visa signatur

Varför använda en dålig attityd? Det är en så onödig sak!
Min hemsida hittar du på tommielag.se