• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Links nach bestimmter Zeit Klickbar machen

K

Kyroy

Neues Mitglied
Hallo,

wie kann ich es in JavaScript verwirklichen, dass ich z.B. 4 verlinkte Bilder erst nach 5 Sekunden anklickbar mache, sie jedoch vorher schon zu sehen sind. Darüber hinaus soll die ablaufende Zeit angezeigt werden.

Vielen Dank
Kyroy
 
Hi Kyroy,

ich habe jQuery verwendet, weil ich sonst zu lange brauche, oder gar nicht ans ziel komme.

Hier ein Beispiel, ist kommentiert.
HTML: 
<!DOCTYPE html>
<html>
<head>
<title>cheggit</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<style type="text/css">
* {margin:0;padding:0;} 

body {
    font-family: Arial,Helvetica,sans-serif;
}

a img {
    border: 0 none;
}
.clear {clear:both;}

#main {
    width: 800px;
    height: 300px;
    margin:100px auto;
}
.imgCage {
    width:110px;
    height:83px;
    border:1px solid #ccc;
    position:relative;
    float:left;
    margin:10px;
}
.notYet {
    background-color: #333333;
    height: 100%;
    opacity: 0.4;
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    z-index: 25;
    
}
.notYet span {
    color: #FFFFFF;
    display: block;
    font-size: 60px;
    font-weight: bold;
    height: 30px;
    left: 40px;
    position: relative;
    top: 5px;
    width: 30px;
}
</style>

<script type="text/javascript">
    $(document).ready(function(){  //besseres window.onload
        
        var counter = 5;   // hier fangen wir an zu zählen
        var timer = 1000; // intervall 1sek.
        $('.notYet span').html(counter); // zähler reinschreiben
            
        setInterval(function() {  // wird im intervall von timer aufgerufen
            counter --;           // counter runterzählen
            $('.notYet span').html(counter); // counter reinschreiben
            
            if(counter == '0'){   // wenn fertig
                $('.notYet').fadeOut(200).remove();  // .notYet komplett raus aus markup
            }
        }, timer);
        
    });
</script>

</head>

<body>
    <div id="main">
        <div class="imgCage">
            <a href="http://www.html.de">
                <img alt="" src="http://t1.ftcdn.net/jpg/00/00/03/28/110_F_32891_fkcdAKTHR5T8efBqrWBpL012vRbc89.jpg" />
            </a>
            <div class="notYet"><span></span></div>
        </div>
        <div class="imgCage">
            <a href="http://www.html.de">
                <img alt="" src="http://t1.ftcdn.net/jpg/00/00/03/28/110_F_32891_fkcdAKTHR5T8efBqrWBpL012vRbc89.jpg" />
            </a>
            <div class="notYet"><span></span></div>
        </div>
        <div class="imgCage">
            <a href="http://www.html.de">
                <img alt="" src="http://t1.ftcdn.net/jpg/00/00/03/28/110_F_32891_fkcdAKTHR5T8efBqrWBpL012vRbc89.jpg" />
            </a>
            <div class="notYet"><span></span></div>
        </div>
        <div class="imgCage">
            <a href="http://www.html.de">
                <img alt="" src="http://t1.ftcdn.net/jpg/00/00/03/28/110_F_32891_fkcdAKTHR5T8efBqrWBpL012vRbc89.jpg" />
            </a>
            <div class="notYet"><span></span></div>
        </div>
        <div class="clear"></div>
    </div>
</body>
</html>

Wenns noch Fragen gibt, immer raus damit.
 
danke schonmal, echt nett :)
kann man das ganze iwie umgehen?
wenn ja, kann man das verhindern?

edit: also javascript aus geht zumindest net^^
 
Zuletzt bearbeitet:
...das ist natürlich nur eine clientseitige Lösung, das stimmt.
Könnte man leicht umgehen und ist unsicher.

Eine sichere Lösung dazu habe ich bisher nicht auf Lager.
Man könnte das Bild zunächst in miesester Qualität oder mit branding drauf einsetzen, und erst nach Ablauf der Zeit das "echte" Bild anzeigen, oder so.

Wenn ich aber bedenke, was man allein mit firebug so anstellen kann, wirds schwierig.

Was hast du denn für eine vorstellung/Anforderung, bzw. warum das timeout?
 
ja, mit firebug hab ichs auch hinbekommen zu umgehen...
so schlimm ist das net, geht nur um ne 5 sec verzögerung, dann kann man ne aktion machen und dann muss man halt wieder 5 sec warten...geht nur drum, dass man es net ganz einfach umgehen kann... und immer direkt die aktion durchführen... firebug veränderungen wären ja beim neuladen der seite wieder weg ...
 
man müsste nur javascript deaktivieren, und jeglicher "Schutz" wäre weg.
Wenns sicher sein soll, muss man das anders anfangen - ich weiss aber leider auch nicht wie 8/
 
Wenns wirklich sicher sein soll muss man das eher mit PHP anstellen. Ich denke mir da so etwas wie eine Session starten und den Timestamp mitliefern. Dieser wird dann Serverseitig abgefragt. Wenn der Timestamp bei 5 Sekunden Mindestunterschied liegt, wird das Bild "freigegeben", ansonsten wird der Timestamp einfach zum Erziehen deiner Benutzer neu gesetzt... ;)
Das ist mir jetzt so auf die Schnelle eingefallen, inwiefern das wirklich sicher ist, ist ne andere Frage. Du könntest diesen Timestamp natürlich noch mit sha oder md5 verschlüsseln, was aber schwierig würde zu kontrollieren...
 
Das ist alles etwas spekulativ, wenn wir nicht wissen, wozu das insgesamt gut sein soll. Vielleicht geht's nur darum, dass der Benutzer 5 Sekunden lang die Bilder betrachten müssen soll, weil diese Werbung enthalten oder so. Vielleicht geht es aber auch darum, die Aktion, die hinter dem Anklicken des Links steckt, um 5 Sekunden zu verzögern. Dann wäre der Hinweis auf PHP/eine serverseitige Scriptsprache sicherlich richtig.
 
es geht darum, die aktion des benutzers um 5 sekunden zu verzögern. dies wiederholt sich sehr oft. wenn man diese 5 sekunden 1 mal umgeht, okay... aber man sollte es nicht dauerhaft machen können, also dass man diesen link immer klicken kann und nicht nur alle 5 sekunden...
man könnte doch denk link einfach per javascript ausführen lassen und schon kann der user das ganze nicht mehr umgehen, wenn er javascript ausschaltet, oder?

wenn ja, link per javascript ausführen?^^

mfg
Kyroy
 
das ginge schon, ist aber nicht gerade userfreundlich...

soll der Link irgendwo hin verweisen, oder gehts dabei um den download des Bildes?
 
Wenn man den Link per JavaScript ausführen lässt kommst du im Prinzip noch immer zum selben Problem. Der Benutzer kann ganz simpel im Quelltext die URL heraussuchen und diese manuell eingeben. Copy & Paste ftw...

Mal abgesehen davon, dass die meisten Benutzer sich sowieso wenig mit Browser, JavaScript und Co. auskennen, finde ich ist PHP die sicherste Möglichkeit, da der Server einfach sehr viel schwerer zu manipulieren ist. Wenn jemand das schafft, fühl' dich frei diese Person anzuklagen... ;-)
 
die seite wird dann neu geladen und davor wurde quasi ein php script ausgeführt...

edit:
da fällt mir ein, man sollte den link, der ausgeführt wird am besten gar nicht sehen -.- sonst kann man ihn ja selber immer wieder ausführen...
gibt es ne möglichkeit ein php script nach klick ausführen zu lassen... und das darf man vor allem nicht einfach so per copy paste ausführen können....
 
Zuletzt bearbeitet:
Du könntest statt des direkten Links einen Transitionslink angeben.

Also statt
HTML: 
<a href="http://www.google.com/"><img src="foo.bar" /></a>
HTML: 
<a href="wait.php?l=af4d690a2cd"><img src="foo.bar" /></a>
Auf wait.php
PHP: 
$links = array('af4d690a2cd'=>'http://www.google.com/');
if (isset($_GET['l']) && isset($links[$_GET['l']])) {
  $linkHash = $_GET['l'];
  if (benutzer_hat_den_link_laenger_als_5_sekunden_angeschaut($link)) {
    header('Location: '.$links[$linkHash]);
    die;
  } else {
    echo 'Pöhser User: DU SOLLTEST 5 SEKUNDEN WARTEN! HAU AB!';
    die;
  }
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben