Foto verwisselen met link

[Verwijderd]

Ik heb een website met 3 frames.
links, boven en midden.
door in het linkerframe te klikken opent in het hoofdframe een soort verjaardagskalender.
Nu wil ik bovenaan de kalender een plaatje plaatsen.
op de kalender staan namen die klikbaar zijn. Als er op een naam geklikt wordt moet het plaatje de foto van dit persoon laten zien.
Is dit mogelijk?

Ik kan het bovenframe hier niet voor gebruiken en omdat het hier een bestaande website betreft is het opdelen van het middenframe eigenlijk geen optie.

ik zat te denken aan zoiets als.
picture = maand.jpg (standaard plaatje)

naam on click: picture = naam.jpg refresh

dit werkt natuurlijk niet, maar op zo'n manier....
kan dit met simpel (D)html en javascript?
Website is opgebouwd uit html + javascript. GEEN PHP/ASP.

[André]

HTML:

[img]"maand.jpg">

<a[/img]Truus</a>

Even uit mijn hoofd en simpel zonder preloading.

[Verwijderd]

getypt zoals het hierboven staat werkt het helaas niet.
Ik ga wel wat meer zoeken over die methode! thx

[Verwijderd]

Met bovenstaand krijg ik overigens.
in 1ste instantie een plaatje, klik ik dan op truus, dan komt er met text truus.jpg te staan!

[BtM909]

Verwijderd schreef op 07 april 2004 @ 12:47:
Met bovenstaand krijg ik overigens.
in 1ste instantie een plaatje, klik ik dan op truus, dan komt er met text truus.jpg te staan!

Volgens mij moet het gewoon werken hoor

Je zou eventueel het volgende kunnen gebruiken:

JavaScript:

document.getElementById('Foto').setAttribute("src", "truus.jpg")

[Verwijderd]

geeft ook niet het gewenste resultaat.
plaatje wordt niet aangepast !

[BtM909]

Verwijderd schreef op 07 april 2004 @ 12:55:
geeft ook niet het gewenste resultaat.
plaatje wordt niet aangepast !

Zit truus.jpg wel in dezelfde directory

Zet eens een stuk online, want m'n glazen bol reikt niet tot aan je PC.

[André]

HTML:

[img]"maand.jpg">

<a[/img]Truus</a>

Zo dan.

[ Voor 30% gewijzigd door André op 07-04-2004 12:59 ]

[Verwijderd]

die laatste werkt volgens mij.
Als ik thuis ben zal ik het in de gehele html file stoppen en testen!
en even laten weten of het werkt
thx.

[Pathogen]

Vergeet niet je targetframe in de link te zetten (target="right" of zo)

[Dark Blue]

Thrackan schreef op 07 april 2004 @ 13:21:
Vergeet niet je targetframe in de link te zetten (target="right" of zo)

Thrackan... de foto staat in hetzelfde, al reeds geladen frame maar moet on the fly verwisseld worden.

Wisselt de foto ook weer terug bij een bepaalde handeling, of blijft Truus zeg maar bovenaan de kalender prijken tot je Toos hebt aangeklikt of naar een andere maand bent gegaan?

[Verwijderd]

het mooiste zou natuurlijk zijn dat de foto van 'truus' na ca. 5 tot 10 seconden weer terugverandert in het originele plaatje.
Maar dat is denk ik teveel gevraagd met script en zonder andere frames!


hmmm, net effe code in html bestand ingetypt en online gezet.
Als ik op de naam klik verdwijnt het originele plaatje, maar blijft er een lege plaats over. F5 of afbeelding weergeven klikken komt het plaatje pas te voorschijn.

Is dit op te lossen?
Zelf zat ik te denken aan een 'preload'.

[ Voor 45% gewijzigd door Verwijderd op 07-04-2004 19:20 ]

[Verwijderd]

Helaas, preload lost dit niet op

iemand nog tips ?

[BtM909]

Verwijderd schreef op 09 april 2004 @ 12:43:
Helaas, preload lost dit niet op

iemand nog tips ?

waar staat het online

[coubertin119]

Voor dat na 5 tot 10 seconden verdwijnen, setTimeout is je vriend.

[Verwijderd]

ik zet hem om 17:30 wel effe online!!
de echte site geef ik liever niet ivm eventueel gekloot in het gastenboek e.d.

[CH4OS]

Verwijderd schreef op 09 april 2004 @ 13:04:
ik zet hem om 17:30 wel effe online!!
de echte site geef ik liever niet ivm eventueel gekloot in het gastenboek e.d.

Die postings in je gastenboek kan je dan gewoon weggooien hoor

[Verwijderd]

Gekloot in je gastenboek hou je toch wel
Maak een mooie admin controller, lekker makkelijk editten heet dat.

Of een supper snelle flush optie , delete complete book werkt ook goed

Maar goed we wachten even af op de posting van de url

[Verwijderd]

de origele site is voor een plaatselijke vereniging.
Deze vraagt weinig aandacht en ik wil dan ook niet dagelijks het gastenboek bekijken en aanpassen.

Je kunt een voorbeeld van de pagina vinden op:

http://members.chello.nl/a.berkvens1/index.html

Graag geen gekloot met eventueel gevonden bestanden!!
BVD SVP AUB ETC.

[Reinier]

Och och och... overal <FONT> tags... verdiep je eens in CSS

Maar het plaatje verandert nu toch goed?

[RobIII]

Reinier schreef op 10 april 2004 @ 01:39:
Och och och... overal <FONT> tags... verdiep je eens in CSS

Maar het plaatje verandert nu toch goed?

Dat niet alleen... Verdiep je eens in HTML

body, head enz. ontbreken ook allemaal stuk voor stuk. Ik begrijp dat het een "voorbeeld" stukje code is, maar veel ranziger dan dit poept zelfs <*slikt naam programma in*> niet voor je uit

edit:

En gebruik a.u.b geen comic sans (bibber)

Ik zal hier zometeen effe de juiste code voor je neerzetten. Ben ik toch nog behulpzaam geweest... Hey, 't is bijna pasen

Et voila:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Mijn Titel</title>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <STYLE type="text/css">
        Body, Table {
            font-family     : Comic Sans MS;
            font-size       : 12px;
            font-weight  : bold;
        }
        
        A {
            color           : #000000;
            font-weight     : normal;
            text-decoration : none;
        }

        A:hover {
            color           : #FF0000;
            font-weight     : normal;
            text-decoration : underline;
        }
    </STYLE>
    <script language="JavaScript" type="text/javascript">
        function showPic(strPic) {
            document.getElementById('myPhoto').src = strPic;
        }
    </script>
</head>

<body>

    <table border="1" width="640">
        <tr>
            <td colspan="2">
                <center>
                    [img]"blaat.jpg"[/img]<br>
                    Januari
                </center>
            </td>
        </tr>
        <tr>
            <td width="320">1 Nieuwjaar</td>
            <td width="320">16</td>
        </tr>
        <tr>
            <td>2 <a href="javascript:showPic('truus1.jpg');">Truus 1</a></td>
            <td>17</td>
        </tr>
        <tr>
            <td>3 <a href="javascript:showPic('truus2.jpg');">Truus 2</a></td>
            <td>18</td>
        </tr>
        <tr>
            <td>4</td>
            <td>19</td>
        </tr>
        <tr>
            <td>5</td>
            <td>20</td>
        </tr>
        <tr>
            <td>6</td>
            <td>21</td>
        </tr>
        <tr>
            <td>7</td>
            <td>22</td>
        </tr>
        <tr>
            <td>8</td>
            <td>23</td>
        </tr>
        <tr>
            <td>9</td>
            <td>24</td>
        </tr>
        <tr>
            <td>10</td>
            <td>25</td>
        </tr>
        <tr>
            <td>11</td>
            <td>26</td>
        </tr>
        <tr>
            <td>12</td>
            <td>27</td>
        </tr>
        <tr>
            <td>13</td>
            <td>28</td>
        </tr>
        <tr>
            <td>14</td>
            <td>29</td>
        </tr>
        <tr>
            <td>15</td>
            <td>30</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>31</td>
        </tr>
    </table>
</body>
</html>

Getest*, W3C valid en guess what? Het werkt nog ook!

_{*Alleen getest in IE...}

Ik heb for-the-sake-of-it comic sans maar aangehouden en de rest van je pagina maar zoveel mogelijk in tact gelaten.

Krijg ik nu een eitje?

[ Voor 211% gewijzigd door RobIII op 10-04-2004 02:14 ]

[Verwijderd]

als je in de buurt van someren woont krijg je een eitje

ik zal effe kijken wat jouw bestand doet!

dat er geen body enz. in zat komt door het feit dat ik snel even wilde kijken of het veranderen van het plaatje werkte.

het font gebeuren komt doordat macromedia dreamweaver er ook een keer aangesnoven heeft.
Het opschonen en maken van een nette html file doe ik pas als het werkt.

maar goed, volgende keer zal ik het netjes aanbieden.

Hé er zit nog geen refresh in zodat het originele plaatje terug komt

Script zojuist getest, werkt PERFECT!!!! THX!!!
En als je in de buurt woont krijg je een eitje


Als we dan toch bezig zijn!!!!

Is het mogelijk om de huidige datum in het rood weer te geven.
Dus alle dagen 1 t/m 31 in het zwart met uitzondering van de huidige dag b.v. 10 in het rood? En dan de namen die achter deze dag staan ook rood?

[ Voor 34% gewijzigd door Verwijderd op 10-04-2004 17:07 ]

[Verwijderd]

Reinier schreef op 10 april 2004 @ 01:39:
Och och och... overal <FONT> tags... verdiep je eens in CSS

Maar het plaatje verandert nu toch goed?

Nee, het plaatje verandert niet.
Pas als je refresh doet of als het plaatje in het geheugen zit!

I like <FONT> tags, maakt m'n file groter waardoor het wel wat lijkt

Nee, zie uitleg bovenstaande post!

[RobIII]

Verwijderd schreef op 10 april 2004 @ 16:46:
als je in de buurt van someren woont krijg je een eitje

20 min afstand

Verwijderd schreef op 10 april 2004 @ 16:46:
Als we dan toch bezig zijn!!!!

Is het mogelijk om de huidige datum in het rood weer te geven.
Dus alle dagen 1 t/m 31 in het zwart met uitzondering van de huidige dag b.v. 10 in het rood? En dan de namen die achter deze dag staan ook rood?

Ik neem aan dat je dit client-side wil oplossen?

Doe dan het volgende:
Voeg tussen je <STYLE> en </STYLE> tags het volgende toe:

code:

    .toDay {
            color           : #FF0000;
            font-weight     : bold;
    }

Voeg tussen je <SCRIPT> tags het volgende toe:

code:

    function colorDay() {
        var today = new Date();
        document.getElementById('d' + today.getDate()).className='toDay';
    }

Zorg vervolgens dat al je td's een ID hebben als volgt:

code:

            <td width="320" id="d1">1 Nieuwjaar</td>
            <td width="320" id="d16">16</td>

En zet tot slot op je body het onload event:

code:

<body onload="colorDay();">

De huidige dag wordt nu rood weergegeven. Zorg wel dat je de juiste maand displayed!

Dit kan overigens ook anders, zonder de id's te gebruiken, maar dit is denk ik het makkelijkst te implementeren voor je.

Voor de volledigheid, hier de complete code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Mijn Titel</title>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <STYLE type="text/css">
        Body, Table {
            font-family     : Comic Sans MS;
            font-size       : 12px;
            font-weight     : bold;
        }
        
        A {
            color           : #000000;
            font-weight     : normal;
            text-decoration : none;
        }

        A:hover {
            color           : #FF0000;
            font-weight     : normal;
            text-decoration : underline;
        }
        
        .toDay {
            color           : #FF0000;
            font-weight     : bold;
        }
    </STYLE>
    <script language="JavaScript" type="text/javascript">
        function showPic(strPic) {
            document.getElementById('myPhoto').src = strPic;
        }
        
        function colorDay() {
            var today = new Date();
            document.getElementById('d' + today.getDate()).className='toDay';
        }
    </script>
</head>

<body onload="colorDay();">

    <table border="1" width="640">
        <tr>
            <td colspan="2">
                <center>
                    [img]"blaat.jpg"[/img]<br>
                    Januari
                </center>
            </td>
        </tr>
        <tr>
            <td width="320" id="d1">1 Nieuwjaar</td>
            <td width="320" id="d16">16</td>
        </tr>
        <tr>
            <td id="d2">2 <a href="javascript:showPic('truus1.jpg');">Truus 1</a></td>
            <td id="d17">17</td>
        </tr>
        <tr>
            <td id="d3">3 <a href="javascript:showPic('truus2.jpg');">Truus 2</a></td>
            <td id="d18">18</td>
        </tr>
        <tr>
            <td id="d4">4</td>
            <td id="d19">19</td>
        </tr>
        <tr>
            <td id="d5">5</td>
            <td id="d20">20</td>
        </tr>
        <tr>
            <td id="d6">6</td>
            <td id="d21">21</td>
        </tr>
        <tr>
            <td id="d7">7</td>
            <td id="d22">22</td>
        </tr>
        <tr>
            <td id="d8">8</td>
            <td id="d23">23</td>
        </tr>
        <tr>
            <td id="d9">9</td>
            <td id="d24">24</td>
        </tr>
        <tr>
            <td id="d10">10</td>
            <td id="d25">25</td>
        </tr>
        <tr>
            <td id="d11">11</td>
            <td id="d26">26</td>
        </tr>
        <tr>
            <td id="d12">12</td>
            <td id="d27">27</td>
        </tr>
        <tr>
            <td id="d13">13</td>
            <td id="d28">28</td>
        </tr>
        <tr>
            <td id="d14">14</td>
            <td id="d29">29</td>
        </tr>
        <tr>
            <td id="d15">15</td>
            <td id="d30">30</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td id="d31">31</td>
        </tr>
    </table>
</body>
</html>

Dat kost je nog een eitje

[ Voor 170% gewijzigd door RobIII op 10-04-2004 17:55 ]

[Verwijderd]

tering, waar kan ik die twee eitjes in de brievenbus stoppen
Voorkeur wit/melk/puur/praliné ?



Thank u very muts.

[ Voor 37% gewijzigd door Verwijderd op 10-04-2004 18:56 ]

[RobIII]

Wit / Melk a.u.b.

[Verwijderd]

Nog een vraagje.

nu heb ik 12 html files, van elke maand 1!

De kalender wordt in een middenframe geopend als er in het linkerframe op een knop gedrukt wordt.
Is het mogelijk om dan automatisch de kalender te laten zien van de huidige maand.
Nu moet ik elke maand de link aanpassen!

Het wordt dadelijk ook mogelijk om vanuit de huidige maand 1 maand vooruit of achteruit te scrollen. Dan wordt nog steeds de huidige dag rood gekleurd. Is het mogelijk om de maand te controleren en indien deze overeenkomt met bestand b.v. april.html dan dag rood ?

nog 2 extra eitjes..

p.s. weet iemand nog een goeie newstracker (binnen-buitenland, sport e.d.)

[ Voor 7% gewijzigd door Verwijderd op 11-04-2004 14:22 ]

[T-MOB]

Jepz... Ik wil ook eitjes!!!

code:

<script type='text/javascript'>
var maandnummer = new Date().getMonth();
 document.write('<a href="kalender' + maandnummer + '.html">Kalender</a>');
</script>

Moet je je 12 files wel een nummertje geven, dus kalender0.html voor januari en kalender11.html voor december...

[ Voor 15% gewijzigd door T-MOB op 11-04-2004 14:29 ]

[Verwijderd]

T-MOB schreef op 11 april 2004 @ 14:29:
Jepz... Ik wil ook eitjes!!!

enschede is een beetje ver om eitjes heen te brengen
Toch bedankt....knabbel maar aan het virtuele ei dat 1 pagina terug staat!
Effe kijken hoe ik die code moet plaatsen
mijn buttonlink ziet er nu zo uit!

<a href="jarigapril.htm" target="main">[img]"images/buttons/verjaardagen.jpg"[/img]</a>

[ Voor 158% gewijzigd door Verwijderd op 11-04-2004 15:12 ]

[T-MOB]

Misschien was je er al uit, maar dan zou ik het zo doen:

code:

<head>
<script type='text/javascript'>
function kalender() {
var maandnummer = new Date().getMonth();
 document.getElementById('kalenderlink').href = 'jarig' + maandnummer + '.htm';
}
</script>
</head>

<body onload="kalender()">
<a id="kalenderlink" href="jarig0.htm" target="main">*etc etc....*
</body>

jarig0.htm refereert dan aan januari, december wordt jarig11.html. Deze wijze scheelt je een hoop escapen voor de image rollover in je link.

[Verwijderd]

T-MOB schreef op 12 april 2004 @ 12:54:
Misschien was je er al uit, maar dan zou ik het zo doen:

Ik was er idd al aan uit, maar jouw code werkt toch weer beter dan het 'gepruts' van mij!

Ik zal me toch eens meer gaan verdiepen in html en scripting, want met dreamweaver en wat basiskennis houdt het toch snel op !

Thx again!

[Guillome]