|
|
 | Vise image ved mouseover
Fra :  findovia  | Vist : 698 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 |
| | |
| Godkendelse af svar
Fra : findovia |
Dato : 21-08-03 13:03 |
| | |
| 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 |
| | |
| 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.
| |
|
|