Notifikationer

Markér alle som læst Log ud

filia Juniormester

22. februar 2007 - 07:01 Der er 17 kommentarer og
2 løsninger

link til skift_billede

Hvordan tilføjer jeg et link til foto.htm (blank target) fra p_foto.gif - ? :

<a class="menulink" href="foto.htm" target="_blank"
onMouseOver="(document.skift_billede.src='../billeder/p_foto.gif')">Foto</a>

?:-)
filia

Synes godt om

crazysnap Seniormester

24. februar 2007 - 12:36 #1

Hej filia,

Jeg tror du må uddybe lidt mere hvad det egentlig er du søger? Spørgsmålet er ikke helt klart! :)

Mvh.

- Snap

Synes godt om

roenving Novice

24. februar 2007 - 16:16 #2

Ja, hvad vil du, hvorfor og hvornår ?-)

Synes godt om

filia Juniormester

24. februar 2007 - 23:30 #3

Jeg har et tekstlink, hvor der står Foto, som fører til foto.htm.
Ved MouseOver kommer der et billede, p_foto.gif, frem ved siden af, og jeg vil gerne have, at dette billede også linker til foto.htm.
Måske er det ikke muligt?
Skift_billede er en transparent/usynlig gif, som ligger i den celle, som de øvrige billeder hentes ind i ved MouseOver på de forskellige links.

?:-)

Synes godt om

filia Juniormester

24. februar 2007 - 23:44 #4

Her er cellen med den transparente gif:
<td width="284" height="235" align="left" valign="top"><img src="../billeder/spacer20x20.gif" name="skift_billede" width="284" height="235" id="skift_billede"></td>

De i alt to omgang kode/script i de her to celler er alt, der hører med til historien so far!
Et link fra billedet kan selvfølgelig godt undværes, det ville bare være rart nok, at begge veje, både billede og tekstlink fører til .htm-siden, og helst ny side/blank target.
:-)

- - -
filia

Synes godt om

crazysnap Seniormester

24. februar 2007 - 23:57 #5

Hej filia,

Det kan man sagtens, har lavet et lille eksempel til dig. Du skal bare kalde 'changeImage' metoden fra din onmouseover som vist i eksemplet nedenfor. Jeg har givet dit <img>-tag et 'id' i stedet for et 'name' så det er unikt og nemt at hente fra javascript. 'changeImage' skal bare have link'et med ind som parameter, id'et på <img>-tag'en og stien hen til det billede som skal vises.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/JavaScript">
function changeImage(refElm, strImageId, strImgPath)
{
var img = document.getElementById(strImageId);

var oldImageSrc = img.src;
img.src = strImgPath;

img.onclick = function() { window.location = "http://www.google.com"; };
}
</script>
</head>
<body>
<table>
<tr>
<td><a href="http://www.google.com" onmouseover="changeImage(this, 'skift_billede', 'pic1.jpg');">Foto</a></td>
</tr>
<tr>
<td><img id="skift_billede" src="" width="284" height="235" alt="Click to redirect" /></td>
</tr>
</table>
</body>
</html>

Håber det var det du ledte efter! :)

Mvh.

- Snap

Synes godt om

crazysnap Seniormester

25. februar 2007 - 00:00 #6

Hovsa, glemte det vigtigste! :)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/JavaScript">
function changeImage(refElm, strImageId, strImgPath)
{
var img = document.getElementById(strImageId);

var oldImageSrc = img.src;
img.src = strImgPath;

img.onclick = function() { window.location = refElm.href; };
}
</script>
</head>
<body>
<table>
<tr>
<td><a href="http://www.google.dk" onmouseover="changeImage(this, 'skift_billede', 'pic1.jpg');">Foto</a></td>
</tr>
<tr>
<td><img id="skift_billede" src="" width="284" height="235" alt="Click to redirect" /></td>
</tr>
</table>
</body>
</html>

Brug det script i stedet, ellers skifter den altid til google.com hver gang der trykkes på billedet i stedet for den side som er specificeret i linket.:)

Mvh.

- Snap

Synes godt om

filia Juniormester

25. februar 2007 - 00:48 #7

Hej Snap,
Mange tak, skal nu lige prøve!
Umiddelbart så: www.google.dk skal vist også skiftes ud i den nederste og erstattes med min foto.htm.... - ?
Og så undrer det mig, at der ikke er specificeret source til skift_billed-giffen (-den sætter jeg bare selv ind?)?
Eller hvor er den ellers specificeret? Jeg er stort set ordblind på javascript udover visse, genkendelige ting. - Kan godt se noget specifikation i head med oldimage, men .... - jeg skal vel stadig bruge giffen, og den skal vel stadig hedde skift_billede?
Nå, prøver det lige af!
:-)

Synes godt om

crazysnap Seniormester

25. februar 2007 - 01:01 #8

Ja www.google.dk skal udskiftes til foto.htm (hvis det er den side linket skal føres til og dermed den side der skal skiftes til når der klikkes på billedet). Ja du skal også selv indsætte "transparent"-giffen i src-tagen for billedet.. Og suk, oldImageSrc var noget jeg lige legede med og glemte at fjerne (det er jo sent på aftenen).

Men med din opsætning burde det se sådan ud (jeg havde bare lavet det som skabalon til dig) :).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/JavaScript">
function changeImage(refElm, strImageId, strImgPath)
{
var img = document.getElementById(strImageId);

img.src = strImgPath;

img.onclick = function() { window.location = refElm.href; };
}
</script>
</head>
<body>
<table>
<tr>
<td><a href="foto.htm" onmouseover="changeImage(this, 'skift_billede', '../billeder/p_foto.gif');">Foto</a></td>
</tr>
<tr>
<td><img id="skift_billede" src="../billeder/spacer20x20.gif" width="284" height="235" alt="Click to redirect" /></td>
</tr>
</table>
</body>
</html>

Mvh.

- Snap

Synes godt om

filia Juniormester

25. februar 2007 - 01:08 #9

Du er hurtig, ! - gjorde som så (og selvfølgelig)...:

<body>
<table>
<tr>
<td><a href="foto.htm" target="_blank" onmouseover="changeImage(this, 'skift_billede', '../billeder/p_foto.gif');">Foto</a></td>
</tr>
<tr>
<td><img id="skift_billede" src="../billeder/spacer20x20.gif" width="284" height="235" alt="Click to redirect" /></td>
</tr>
</table>
</body>

Men det er ligesom det, jeg havde før, dvs. billedet kommer fint frem, men der er ikke link på det. Eneste forskel er alt-tagget med en redirect-besked.
Prøver lige det seneste her.

:-)

Synes godt om

roenving Novice

25. februar 2007 - 01:12 #10

-- prøv at tilføje:

style="cursor:pointer;" til skift_billede img-tagget !-)

Synes godt om

filia Juniormester

25. februar 2007 - 01:13 #11

Undskyld - det passer ikke, hvad jeg siger!
Begge virker ok! Det er bare fordi, min .htm-testside til forveksling ligner den uformaterede side, jeg kom fra.
Skynder mig lige at sende...

Synes godt om

crazysnap Seniormester

25. februar 2007 - 01:19 #12

Nå, det var godt at høre! :) Og for god ordens skyld burde du putte style="cursor:pointer;" på img-tagget som roenving foreslår så brugerne kan se at det er muligt at klikke på billedet! :)

Synes godt om

filia Juniormester

25. februar 2007 - 01:24 #13

Præcis, det var også lige det eneste, jeg sad og manglede.
Så nu er det jo bare helt perfekt og på plads!
Læg svar begge, roenving skal også have nogle points for det med pointeren.

1000 tak for hjælpen!
:-))
filia

Synes godt om

crazysnap Seniormester

25. februar 2007 - 01:25 #14

Glad for jeg kunne hjælpe og held og lykke med det! :)

Tak for pointene...

Mvh.

- Snap :)

Synes godt om

filia Juniormester

25. februar 2007 - 01:33 #15

roenving skulle jo også lige have nogle points, så de kommer.
Og så ser jeg i øvrigt lige, at der ikke er blank target på billedet. Jeg satte blank target ind, men den virker kun på tekstlinket, som åbner i nyt vindue.
Er der en løsning til billedet også?
- Men er ellers tilfreds, så bliv nu ikke oppe hele natten!
:-)
filia

Synes godt om

roenving Novice

25. februar 2007 - 01:43 #16

-- så skal du også:

...
img.onclick = function() { window.open(refElm.href,"newWin"); };

...

Velbekomme '-)

Synes godt om

crazysnap Seniormester

25. februar 2007 - 01:49 #17

Øv, roenving nåede det før mig! ;)... Så javascript metoden skal udskiftes med:

function changeImage(refElm, strImageId, strImgPath)
{
var img = document.getElementById(strImageId);

img.src = strImgPath;
img.onclick = function() { window.open(refElm.href, "newWin"); };

}

Nå, men nu må funktionaliteten vist også være på plads og jeg vil smutte i seng. Tak for dine suppleringer roenving. :)

- Snap

Synes godt om

filia Juniormester

25. februar 2007 - 01:58 #18

Perfekt!!
Sov godt!!!
:-)))
filia

Synes godt om

roenving Novice

25. februar 2007 - 02:09 #19

-- ilm og tak for point ;~}

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS