|
| 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 |
| | |
| 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.
| |
|
|