Som besökare på Hamsterpaj samtycker du till användandet av s.k. cookies för att förbättra din upplevelse hos oss. Jag förstår, ta bort denna ruta!
Annons

Bild visas på "mouseover"

Skapad av tok124, 2013-10-16 23:03 i Webbutveckling & Programmering

3 916
13 inlägg
0 poäng
tok124
Visningsbild
P 35 Hjälte 258 inlägg
2013-10-16 23:03
0
Hej.

Sorry om det här är fel ställe att fråga detta på men jag har en fråga. jag håller på med en hemsida och jag skulle vilja lägga ut en text så när man håller musen på texten så ska en bild komma upp. sidan jag gör är en wordpress sida så där finns ju en text editor i sjävla admin panelen som använder html språk. sidan handlar om world of warcraft. så jag hade tänkt att länka ett world of warcraft item på hemsidan. så om ni vill se EXAKT vad jag menar kolla här: http://www.wowhead.com/items=2.15 där kan ni se alla items. håller man musen ovanför den texten så kommer en bild up och tooltip för item. vill ha någon typ av kod som jag kan använda i wordpress. så gör inte ett helt script. vet inte om man kan använda <head></head> i wordpress och vet inte ens om de behövs för de jag vill ha.

Tack på förhand!
Direktlänk Svara på inlägg Gästbok
Skicka

Är reklamen ivägen? Logga in eller registrera dig så försvinner den!

glomt
Visningsbild
P 31 Falkenberg Hjälte 1 434 inlägg
2013-10-16 23:24
0

Svar till tok124 [Gå till post]:
http://stackoverflow.com/questions/10202641/how-to-make-image-hover-in-css
Visa spoiler
}
.nkhome a img:hover {
background-img(Images/btnhomeh.png);
position:absolute;
top:0px;
}


Något sånt borde fungera

\(^o^)/ Ingen kan låta så tyst som min telefon...

Direktlänk Svara på inlägg Gästbok
Skicka
tok124
Visningsbild
P 35 Hjälte 258 inlägg
Trådskapare
2013-10-16 23:33
0
men kan man använda CSS scriptning i wordpress text editor?
Direktlänk Svara på inlägg Gästbok
Skicka
glomt
Visningsbild
P 31 Falkenberg Hjälte 1 434 inlägg
2013-10-16 23:37
0

Svar till tok124 [Gå till post]:
Du kan INTE använda mouseover i HTML, det vet jag iallafall... (Förutom ev. i html5)



\(^o^)/ Ingen kan låta så tyst som min telefon...

Direktlänk Svara på inlägg Gästbok
Skicka
tok124
Visningsbild
P 35 Hjälte 258 inlägg
Trådskapare
2013-10-16 23:44
0
ahaa =( så de går inte att fixa i wordpress då? eller finns de något sätt jag kan fixa de på endå? typ göra ett textdocument i notepadd++ och ändra språk till CSS och klistra in scriptet och spara de i wordpress mappen sen på något sätt få in den på en sida i wordpress?
Direktlänk Svara på inlägg Gästbok
Skicka
Patrikp
Visningsbild
P 28 Karlskrona Hjälte 1 187 inlägg
2013-10-17 00:28
0
Du ska kunna modifiera css filen i wordpress. Att bara kunna redigera html vore rätt cp.

HareKrishnas gud sedan 2014

Direktlänk Svara på inlägg Gästbok
Skicka
tok124
Visningsbild
P 35 Hjälte 258 inlägg
Trådskapare
2013-10-17 00:58
0

Svar till Patrikp [Gå till post]:
haha jo sant... de skulle vara rätt cp. men frågan är bara vilken CSS fil det är som hör till alla sidor som finns på min menu bar. och vart i scriptet man kan lägga till de jag vill ha. kan ju som sagt inte mycket om CSS. men fan detta verkar vara svårare än jag hade hoppats på. men ah allt är möjligt med lite scriptande. dock är inte allt lätt =(

Direktlänk Svara på inlägg Gästbok
Skicka
Patrikp
Visningsbild
P 28 Karlskrona Hjälte 1 187 inlägg
2013-10-17 01:01
0

Svar till tok124 [Gå till post]:
Sålänge css filen är inkluderad i dem filerna som du vill att effekten ska vara på så bör det inte spela så stor roll vart du lägger koden.


HareKrishnas gud sedan 2014

Direktlänk Svara på inlägg Gästbok
Skicka
Lobax
Visningsbild
P 30 Uppsala Hjälte 5 448 inlägg
2013-10-17 12:36
0
Svar till tok124 [Gå till post]:
Du kan ju också kolla källkoden på sidan i fråga, så ser hur de har gjort det.

Om du har Firefox, tryck ctrl + shift + i. För sedan muspekaren över relevanta del. Du kan då se vad det är som triggar mouseovern, och vad den för id och class. Inspektera sedan CSS:en genom shift + f7, och leta upp en mousover med rätt id/class. Du kan ändra css:en eller kommentera ut rader för att se vilken effekt det får på outputen.

Direktlänk Svara på inlägg Gästbok
Skicka
ilesmap
Visningsbild
F 27 Haninge Hjälte 60 inlägg
2013-12-17 20:44
0
Någon sa att mouseover inte gick i html; det gör det visst! c:

Visa spoiler
<img src="adressen till bild 1" oversrc="adressen till bild 2" border="0">


Du behöver dock denna inom head-taggarna:
Visa spoiler
[removed]
<!--
// This is the implementation of SimpleSwap
// by Jehiah Czebotar
// Version 1.1 - June 10, 2005
// Distributed under Creative Commons
//
// Include this script on your page
// then make image rollovers simple like:
// <img src="/images/ss_img.gif" oversrc="/images/ss_img_over.gif">
//
// http://jehiah.com/archive/simple-swap
//
function SimpleSwap(el,which){
el.src=el.getAttribute(which || "origsrc");
}
function SimpleSwapSetup(){
var x = document.getElementsByTagName("img");
for (var i=0;i<x.length;i++){
var oversrc = x[i].getAttribute("oversrc");
if (!oversrc) continue;
// preload image
// comment the next two lines to disable image pre-loading
x[i].oversrc_img = new Image();
x[i].oversrc_img.src=oversrc;
// set event handlers
x[i]. Function("SimpleSwap(this,'oversrc');");
x[i]. Function("SimpleSwap(this);");
// save original src
x[i].setAttribute("origsrc",x[i].src);
}
}
var PreSimpleSwap window.onload : function(){};
window. SimpleSwapSetup();}
//-->
[removed]



Vet inte om det hjälpte nåt haha, men det funkar iaf i html! ^^

HP behöver en anti p21-skylt // Jag är ännu fulare på riktigt

Direktlänk Svara på inlägg Gästbok
Skicka
Patrikp
Visningsbild
P 28 Karlskrona Hjälte 1 187 inlägg
2013-12-17 23:01
0

Svar till ilesmap [Gå till post]:
FYI så är inte det där bara html utan även javascript.

HareKrishnas gud sedan 2014

Direktlänk Svara på inlägg Gästbok
Skicka
ilesmap
Visningsbild
F 27 Haninge Hjälte 60 inlägg
2013-12-17 23:17
0

Svar till Patrikp [Gå till post]:
Ja, ja, okej. Men ändå. Jag var nära. :)

HP behöver en anti p21-skylt // Jag är ännu fulare på riktigt

Direktlänk Svara på inlägg Gästbok
Skicka
tok124
Visningsbild
P 35 Hjälte 258 inlägg
Trådskapare
2013-12-25 11:05
0
Svar till ilesmap [Gå till post]:
Jag hittade de jag behövde men tack endå. De var ett JavaScript som jag hittade här http://www.wowhead.com/tooltips#related-advanced-usage

Direktlänk Svara på inlägg Gästbok
Skicka

Forum » Datorer & IT » Webbutveckling & Programmering » Bild visas på "mouseover"

Ansvariga ordningsvakter:

Användare som läser i den här tråden just nu

1 utloggad

Skriv ett nytt inlägg

Hej! Innan du skriver om ett potentiellt problem så vill vi påminna dig om att du faktiskt inte är ensam. Du är inte onormal och världen kommer inte att gå under, vi lovar! Så slappna av och gilla livet i några minuter - känns det fortfarande hemskt? Skriv gärna ner dina tankar och frågor, vi älskar att hjälpa just dig!

Den här tråden är äldre än Rojks drömtjej!

Det senaste inlägget i den här tråden skrevs för över tre månader sedan. Är du säker på att du vill återuppliva diskussionen? Har du något vettigt att tillföra eller passar din fråga i en ny tråd? Onödiga återupplivningar kommer att låsas så tänk efter en extra gång!

Rubrik

Inlägg

Fet Kursiv Spoiler Bild Film Kod Undersökning

Förhandsgranska Spara

Hjälp

Det här är en hjälpruta

Här får du korta tips och förklaringar om forumet. Välj kapitel i rullningslisten här ovanför.

Rutan uppdateras automagiskt

När du använder funktioner i forumet så visas bra tips här.


Annons
Annons
Annons
Annons