/ Forside/ Teknologi / Internet / Hjemme sider / Spørgsmål
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Hjemme sider
#NavnPoint
molokyle 23766
Klaudi 7947
bentjuul 7763
BjarneD 4584
severino 4460
Manse9933 4366
natmaden 3985
disken 3947
miritdk 3593
10  refi 3578
Vise image ved mouseover
Fra : findovia
Vist : 751 gange
200 point
Dato : 20-08-03 13:12

På siden: http://home9.inet.tele.dk/findovia/farvegladerne/Sanserum/start2.html har jeg lavet en liste over udstillernes navne og når man peger på et af dem, popper der et lille vindue op med et foto af personen (ikke dem alle endnu). Men jeg ville gerne have vist fotoet uden et vindue. Det har jeg set et sted på en hjemmeside en gang. Er der nogen, der kan vise mig, hvad jeg skal gøre?

 
 
Kommentar
Fra : molokyle


Dato : 20-08-03 14:55

Her er et lille eksempel på, hvordan du kan gøre. Du skal selvfølgelig selv vælge TEKSTx.gif, BILLEDEx.gif,


Du laver først en *.js fil; f.eks functions.js :

Kode
<!--

billede1 = new Image;
billede1.src = "TEKST1.gif";
billede1Over = new Image;
billede1Over.src = "BILLEDE1.gif";

billede2 = new Image;
billede2.src = "TEKST2.gif";
billede2Over = new Image;
billede2Over.src = "BILLEDE2".gif";

function MouseOverRoutine(ButtonName)
{
switch(ButtonName)
{
case "pic1":
document.pic1.src = billede1Over.src;
break;
case "pic2":
document.pic2.src = billede2Over.src;
break;
}
}

function MouseOutRoutine(ButtonName)
{
switch(ButtonName)
{
case "pic1":
document.pic1.src = billede1.src;
break;
case "pic2":
document.pic2.src = billede2.src;
break;
}
}

-->


..i din <head> tilføjer du så :

Kode
<script type="text/javascript" src="functions.js"></script>


..i din <body> kan du så indsætte :

Kode
<a href="SIDE1.html" onmouseOver=MouseOverRoutine("pic1") onmouseOut=MouseOutRoutine("pic1")>
<img src="BILLEDE1.gif" border="0" name="pic1"></a>

<a href="SIDE2.html" onmouseOver=MouseOverRoutine("pic2") onmouseOut=MouseOutRoutine("pic2")>
<img src="BILLEDE2.gif" border="0" name="pic2"></a>


Når du kører musen henover billedet TEKSTx.gif vil det blive swappet om med BILLEDEx.gif. Når musen mister focus genstilles til TEKSTx.gif.

Du kan også bruge *.jpg eller *.png, hvis du bedre kan lide det.

Du kan også vælge at lægge billederne i et array, så du kan indexere dem, istedet for at bruge et unikt navn til hvert billede.

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 20-08-03 21:25

Der havde sneget sig en lille hovsa fejl ind da jeg fik testet det igennem. Nu har jeg imidlertid samlet det hele i en fil til dig. Du kan jo så selv dele det op senere.

Kode
<html><title>test</title>
<head>
<script type="text/javascript">
<!--

billede1 = new Image;
billede1.src = "TEKST1.gif";

billede1_Over = new Image;
billede1_Over.src = "BILLEDE1.gif";

billede2 = new Image;
billede2.src = "TEKST2.gif";

billede2_Over = new Image;
billede2_Over.src = "BILLEDE2.gif";

function MouseOverRoutine(ButtonName)
{
switch(ButtonName)
{
case "billede1":
document.billede1.src = billede1_Over.src;
break;
case "billede2":
document.billede2.src = billede2_Over.src;
break;
}
}

function MouseOutRoutine(ButtonName)
{
switch(ButtonName)
{
case "billede1":
document.billede1.src = billede1.src;
break;
case "billede2":
document.billede2.src = billede2.src;
break;
}
}

-->
</script>
</head>
<body>
<a href="SIDE1.html" onmouseOver=MouseOverRoutine("billede1") onmouseOut=MouseOutRoutine("billede1")>
<img src="TEKST1.gif" border="0" name="billede1"></a>
<br><br><br>
<a href="SIDE2.html" onmouseOver=MouseOverRoutine("billede2") onmouseOut=MouseOutRoutine("billede2")>
<img src="TEKST2.gif" border="0" name="billede2"></a>
</body>
</html>


Ja, så er det bare at klippe og klistre

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 20-08-03 21:53

Altså (...efter at have rettet de værste 'brølere' ) :

*.js filen, jeg her kalder for test.js :

Kode
<!--

billede1 = new Image;
billede1.src = "TEKST1.gif";

billede1_Over = new Image;
billede1_Over.src = "BILLEDE1.gif";

billede2 = new Image;
billede2.src = "TEKST2.gif";

billede2_Over = new Image;
billede2_Over.src = "BILLEDE2.gif";

function MouseOverRoutine(ButtonName)
{
switch(ButtonName)
{
case "billede1":
document.billede1.src = billede1_Over.src;
break;
case "billede2":
document.billede2.src = billede2_Over.src;
break;
}
}

function MouseOutRoutine(ButtonName)
{
switch(ButtonName)
{
case "billede1":
document.billede1.src = billede1.src;
break;
case "billede2":
document.billede2.src = billede2.src;
break;
}
}

-->


..og html filen der inkluderer den :

Kode
<html><title>test</title>
<head>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<a href="SIDE1.html" onmouseOver=MouseOverRoutine("billede1") onmouseOut=MouseOutRoutine("billede1")>
<img src="TEKST1.gif" border="0" name="billede1"></a>
<br><br><br>
<a href="SIDE2.html" onmouseOver=MouseOverRoutine("billede2") onmouseOut=MouseOutRoutine("billede2")>
<img src="TEKST2.gif" border="0" name="billede2"></a>
</body>
</html>


Stadig; klippe og klistre som du lyster

</MOLOKYLE>

Kommentar
Fra : findovia


Dato : 20-08-03 23:30

Kære molekyle,
Tak for din indsats. Jeg har ikke testet det endnu; men så langt jeg kan forstå koderne, så er det ikke helt det, jeg havde spurgt om.

Jeg vil gerne have vist fotoet på samme sted, som det står nu - bare uden vindue. Jeg vil også helst være fri for at lave navnene om til gif'er og blot kunne pege på dem, som de er skrevet.

Så vidt jeg forstår dit forslag, skal jeg lave en gif for hvert navn (TEKST_X.gif) og en for hvert tilsvarende foto (BILLEDE_X.gif). Når man så peger på navnet erstates det af fotoet; men det var som sagt ikke helt det, jeg drømte om.

Med venlig hilsen.
findovia

Kommentar
Fra : molokyle


Dato : 21-08-03 01:11

Har jeg så nu forstået dig ret;

Du så vil ha' en pop-up uden 'ramme' og tittellinie? Du skal da være opmærksom på det ikke, ligesom nu, kan vises uden for browservinduet. Dvs. det bliver noget med CSS for at få det placeret relativt i forhold det aktuelle vindue.

Jeg skal kikke på det imorgen, hvis ikke der kommer andre 'kloge' hoveder til forinden

</MOLOKYLE>



Accepteret svar
Fra : molokyle

Modtaget 200 point
Dato : 21-08-03 02:20

Ok. jeg kunne alligevel ikke sove, så her kommer det :

Kode
<html>
<head>
<script language="javascript">
var imageName = "swapImage";
var oldSrc = null;
function imgOver(newSrc) {
oldSrc = document.images[imageName].src;
document.images[imageName].src = newSrc;
}
function imgOut() {
document.images[imageName].src = oldSrc;
oldSrc = null;
}
</script>
</head>
<body>
<p>
Kør musen over et tekstlink :
<a href="#" onmouseover="imgOver('BILLEDE1.gif')" onmouseout="imgOut()">Et</a>
<a href="#" onmouseover="imgOver('BILLEDE2.gif')" onmouseout="imgOut()">To</a>
</p>
<div style="position:absolute;top=100px;left=100px;">
<img name="swapImage" src="pixel.gif" width="100" height="100">
</div>
</body>
</html>


I dette eksempel har jeg valgt at placere billedet på 100,100 absolut i forhold til browservinduets øverste venstre hjørne.
Som pixel.gif har jeg valgt at bruge en transparant gif89a, men du kunne såmen ligeså godt bruge en jpg/png i samme farve som din baggrund.

Håber det er noget du kan bruge, ellers spørger du bare. Det er sgu så hyggeligt at sidde og kode lidt

</MOLOKYLE>

Kommentar
Fra : findovia


Dato : 21-08-03 12:57

Kære molekyle,

Bravo! Bravo! Bravo!

Tak ska' du ha'! Nu virker det, som jeg havde tænkt mig. Jeg har tilpasset det og lagt det op på siden, som du nu kan se på: http://home9.inet.tele.dk/findovia/farvegladerne/Sanserum/

Med mine bedste hilsner.
findovia


Godkendelse af svar
Fra : findovia


Dato : 21-08-03 13:03

Kære molekyle,

Bravo! Bravo! Bravo!

Tusind tak. Det virker nu helt, som jeg havde tænkt mig. Jeg har tilpasset det og lagt det op på siden, som nu kan ses på: http://home9.inet.tele.dk/findovia/farvegladerne/Sanserum/.

Med mine bedste hilsner.
findovia

PS: Hvis det interesserer dig, kan du se min hjemmeside på: http://www.findovia.dk, hvor SHOW under GRAFIK er min seneste kreation.
                        

Kommentar
Fra : molokyle


Dato : 21-08-03 13:13

Jeg så lige, der rent faktisk, hvis man lægger sig lidt i selen, også er en mulighed for, det kan implementeres helt uden JavaScript! Med lidt hiv og sving, en portion tålmodighed og lidt trylleformularer kunne løsningen muligvis findes via CSS alene : http://www.uoguelph.ca/~stuartr/articles/cssrollovers.shtml

findovia; hvad så med lidt kredits? Jeg ku' godt bruge de 200. Vælg Accepter her (over Dato) : >>--------------------^

Det er ikke for at plage, men det ku' jo være du ikke vidste, det sådan man gør.

Ps. Ryk det lidt op. Hvis man ikke kører med maximeret vindue er det lidt svært et se der sker noget. Ellers fint nok.

Happy Coding.....

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 21-08-03 13:15

UPS..adasse... Der var jeg lidt for hurtig !!! Undskyld, undskyld undskyld.....

Takker for point

</MOLOKYLE>

Kommentar
Fra : findovia


Dato : 21-08-03 16:51

Hej igen molekyle,

Det har vist sig, at der alligevel er et problem med løsningen:
Fotos bliver vist i en fast afstand fra sidens top; men det skaber problemer, hvis den besøgendes browser ikke er indstillet til samme skrifstørrelse, som jeg kører med (120 px).
Det bedste ville være, hvis foto vises ud for det enkelte navn, eller til nøds i en fast afstand fra vinduets top og ikke fra sidens top.

Kan du trylle lidt igen?

Hilsen.
findovia


Kommentar
Fra : molokyle


Dato : 21-08-03 17:19

Prøv med relative istedet for absolute i forhold til top. Stil spørgsmålet i JavaScript, HTML, andet udvikling eller noget, hvis det ikke virker.

..eller bedre læs lidt CSS : http://www.w3schools.com/css/default.asp

..eller : http://www.webdesign101.dk/

Mvh. </MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 21-08-03 17:21

Ps. Det er mest fordi jeg lige har fået gæster og der står madlavning på programmet

Vi ses...

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 21-08-03 17:25

Pps. Det kan godt lade sig gøre med lidt AbraCadabra at få billederne til at komme ved linket. Har bare ikke tid nu. Husk: Et spørgsmål ad gangen

Prøv selv, til jeg vender frygteligt tilbage på Kandu.dk

</MOLOKYLE>


Kommentar
Fra : findovia


Dato : 21-08-03 19:10

Hej molekyle,
Jeg har prøvet med relative i stedet for absolute; men det virker ikke for mig.
Jeg har været inde på de to nævnte links og studeret lidt; men det er for svært på mit nuværende kompetance niveau.
</findovia>

Du har følgende muligheder
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.

Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
Søg
Reklame
Statistik
Spørgsmål : 177547
Tips : 31968
Nyheder : 719565
Indlæg : 6408797
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste