link til skift_billede

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

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

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.

?:-)

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

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

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

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!
:-)

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

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.

:-)

-- prøv at tilføje:

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

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

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! :)

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

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


Tak for pointene...


Mvh.

- Snap :)

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

-- så skal du også:

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

...

Velbekomme '-)

Ø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

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

-- ilm og tak for point ;~}