|
| Imageswap med en IF-sætning Fra : AllanE |
Dato : 05-06-02 09:01 |
|
Er der en der kan hjælpe mig med at lave et simpelt script der skifter
billede 1 til billede 2, når der klikkes på det og omvendt.
Helt konkret skal jeg lave en "fold-ud" funktion med et Plus og Minus hhv.
når teksten er foldet ind og ud. Når der klikkes på plusset folder teksten
sig ud og plusset skal skifte til minus. Det skal kun virke til IE5.5 og op,
så det må næsten kunne laves på få linjer?
På forhånd tak.
-AllanE
| |
Knud Gert Ellentoft (05-06-2002)
| Kommentar Fra : Knud Gert Ellentoft |
Dato : 05-06-02 09:25 |
|
Wed, 5 Jun 2002 10:01:21 +0200, skrev "AllanE"
<elsted@NO-SPAM.postkasse.com>:
>Er der en der kan hjælpe mig med at lave et simpelt script der skifter
>billede 1 til billede 2, når der klikkes på det og omvendt.
Hvis det skal være simpelt, tror jeg det er svært med onClick, du
kan ikke bruge et med onMouseover?
Så følger det her:
<html>
<head>
<script language="javascript">
<!-- Skjul for gamle browsere
imageIn = new Image(256, 256);
imageOut = new Image(256, 256);
imageIn.src="1.JPG";
imageOut.src="2.JPG";
function swapImageIn()
{
document.imageToSwap.src=imageIn.src;
}
function swapImageOut()
{
document.imageToSwap.src=imageOut.src;
}
//Slut skjul -->
</script>
</head>
<body>
<a href="#" onMouseover="swapImageIn()"
onMouseout="swapImageOut()"><img src="1.JPG" width=256 height=256
name="imageToSwap"></a>
</body>
</html>
Fut: news:dk.edb.internet.webdesign.clientside, hvor
scriptspørgsmål hører hjemme og svar herpå bringes.
--
Knud - http://home13.inet.tele.dk/smedpark/
Når der svares på et indlæg, svar venligst under det citerede og
skær venligst det væk, du ikke svarer på, ellers ryger du i killfiltret.
Svar kun i nyhedsgruppen - tak! E-mails besvares ikke.
| |
AllanE (05-06-2002)
| Kommentar Fra : AllanE |
Dato : 05-06-02 09:55 |
|
FUT'et hertil fra dk.edb.internet.webdesign.html:
"Knud Gert Ellentoft" <knudgert@mail.tele.dk> skrev i en meddelelse
news:2eirfuofj9io439ib3su74k88s7ljm3e87@dtext.news.tele.dk...
> Wed, 5 Jun 2002 10:01:21 +0200, skrev "AllanE"
> <elsted@NO-SPAM.postkasse.com>:
>
>>Er der en der kan hjælpe mig med at lave et simpelt script der skifter
>>billede 1 til billede 2, når der klikkes på det og omvendt.
>>
>>Helt konkret skal jeg lave en "fold-ud" funktion med et Plus og Minus hhv.
>>når teksten er foldet ind og ud. Når der klikkes på plusset folder teksten
>>sig ud og plusset skal skifte til minus. Det skal kun virke til IE5.5 og
op,
>>så det må næsten kunne laves på få linjer?
>>På forhånd tak.
>>-AllanE
>
> Hvis det skal være simpelt, tror jeg det er svært med onClick, du
> kan ikke bruge et med onMouseover?
>
> Så følger det her:
> <html>
> <head>
> <script language="javascript">
> <!-- Skjul for gamle browsere
>
> imageIn = new Image(256, 256);
> imageOut = new Image(256, 256);
> imageIn.src="1.JPG";
> imageOut.src="2.JPG";
>
> function swapImageIn()
> {
> document.imageToSwap.src=imageIn.src;
> }
>
> function swapImageOut()
> {
> document.imageToSwap.src=imageOut.src;
> }
> //Slut skjul -->
> </script>
> </head>
> <body>
> <a href="#" onMouseover="swapImageIn()"
> onMouseout="swapImageOut()"><img src="1.JPG" width=256 height=256
> name="imageToSwap"></a>
> </body>
> </html>
>
> Fut: news:dk.edb.internet.webdesign.clientside, hvor
> scriptspørgsmål hører hjemme og svar herpå bringes.
> --
Nej, det skal kunne bruges med onClick...
-AllanE
| |
Knud Gert Ellentoft (05-06-2002)
| Kommentar Fra : Knud Gert Ellentoft |
Dato : 05-06-02 10:49 |
|
Wed, 5 Jun 2002 10:55:26 +0200, skrev "AllanE"
<elsted@NO-SPAM.postkasse.com>:
>Nej, det skal kunne bruges med onClick...
Det bliver en svær en, jeg ved ikke lige, hvordan man skal kunne
lave to onClickhandlinger samme sted.
Det er ikke svært at lave et billedskift med onClick, men at gå
tilbage til billede 1 også med onClick, det er det svære.
Jeg har prøvet at søge på google og jeg kan ikke finde noget
script, der kan klare det, når det er billedet, der skal være
klikbart.
Det er let nok med, hvis funktionen må flyttes op i et par
knapper/links.
PS. Når du svarer på et indlæg, så må du meget gerne klippe i det
du svarer på, der var f.eks. ingen grund til at medsende hele mit
svar incl. signatur.
med venlig hilsen
Knud
--
Når der svares på et indlæg, svar venligst under det citerede
og skær venligst det væk, du ikke svarer på.
Du kan læse mere om de danske nyhedsgrupper på http://www.usenet.dk
http://home13.inet.tele.dk/smedpark
| |
Henrik Lynggaard (05-06-2002)
| Kommentar Fra : Henrik Lynggaard |
Dato : 05-06-02 12:08 |
|
AllanE wrote:
> FUT'et hertil fra dk.edb.internet.webdesign.html:
>
> Nej, det skal kunne bruges med onClick...
Prøv det her:
<html>
<head>
<script language="javascript">
imageIn = new Image(9, 9);
imageOut = new Image(9, 9);
imageIn.src="images/plus.gif";
imageOut.src="images/minus.gif";
function swapImage()
{
if (document.imageToSwap.src==imageIn.src)
{
document.imageToSwap.src=imageOut.src;
}
else
{
document.imageToSwap.src=imageIn.src;
}
}
</script>
<title>test 2</title>
</head>
<body>
<a href="#" onclick="swapImage()"><img src="images/plus.gif"
width="256" height="256" name="imageToSwap">
</a>
</body>
</html>
| |
AllanE (05-06-2002)
| Kommentar Fra : AllanE |
Dato : 05-06-02 15:04 |
|
PERFEKT!!! Det virker!
Bare af nysgerrighed: Hvad gør de første linjer (imageIn = new Image(9, 9) &
imageOut = new Image(9, 9))?
Tak for hjælpen.
-AllanE
| |
AllanE (05-06-2002)
| Kommentar Fra : AllanE |
Dato : 05-06-02 15:18 |
|
Kan du evt. også vise hvordan man gør den dynamisk, så jeg kan have flere
"Plus/minus" på siden? Kan man f.eks. kalde funktionen
"swapImage(ImageNavn)", og så angive billedets navn når funktionen kaldes?
Jeg kan ikke selv få det til at virke, men håber at du eller en af jer andre
kan...
-AllanE
| |
Henrik Lynggaard (05-06-2002)
| Kommentar Fra : Henrik Lynggaard |
Dato : 05-06-02 16:50 |
|
AllanE wrote:
> Kan du evt. også vise hvordan man gør den dynamisk, så jeg kan have flere
> "Plus/minus" på siden? Kan man f.eks. kalde funktionen
> "swapImage(ImageNavn)", og så angive billedets navn når funktionen kaldes?
> Jeg kan ikke selv få det til at virke, men håber at du eller en af jer andre
> kan...
Prøv med noget i denne retning (den her kan du også angive hvad
billedfilen skal starte med)
<html>
<head>
<script language="javascript">
function swapImage(imgname,filePrefix)
{
/* opret to tomme billed elementer/objecter */
var imageIn = new Image(9, 9);
var imageOut = new Image(9, 9);
/* bliver referencen til vores img tag */
var imageElement;
/* preload billederne der skal skiftes imellem */
imageIn.src= "images/"+filePrefix + "_in.gif";
imageOut.src="images/"+filePrefix + "_out.gif"
/* vi er nød til at gå igennem eval for at sætte imageElement,
vi kunne alternativt bruge document.getElementById(imgname); men
det virker kun i nyere browsere */
eval("imageElement = document."+imgname);
/* lav skiftet */
if (imageElement.src==imageIn.src)
{
imageElement.src=imageOut.src;
}
else
{
imageElement.src=imageIn.src;
}
}
</script>
<title>test 2</title>
</head>
<body>
<a href="#" onclick="swapImage('imageToSwap','icon')"><img
src="images/icon_in.gif"
width="256" height="256" name="imageToSwap"></a>
<br>
</body>
</html>
mvh
henrik
| |
AllanE (05-06-2002)
| Kommentar Fra : AllanE |
Dato : 05-06-02 20:08 |
|
Tusind tak for hjælpen, Henrik! Det virker perfekt nu.
-AllanE
| |
|
|