Slikom ka starovanju Flash igre/koda...

[ Inspector @ 29.04.2011. 02:31 ] @

E ovako ljudi bavim se Blogovanjem malo duze ali ne mogu da se bash pohvalim svojim html i flash znanjem i zato mi je potrebna vasha pomoc. Sta hocu konkretno da uradim : napravio sam Blog posvecen besplatnim flash igrama i njihovim opisima. Naravno koristim besplatne kodove sa "Free flash games for you" sajtova i tu se javlja sledeci problem jer ja necu da mi se igre automatski startuju pri otvaranju stranice bloga (sto mi se sa kodom dole deshava) vec da se na tom mestu stavi slika sa znakom play ili jednostavno obichna slika koju bi ja uradio i tek onda po kliku na tu sliku da mi se flash igra i kod koji sam vam postavio dole aktivira i da covek moze da igra. Ovo mi je potrebno iz vise razloga a najvise mi treba zato shto na blogu postavljam vishe igara na glavnoj stranici i bilo bi glupo da mi se 10 igrica odjednom ucitava shto znachajno usporava rad... Evo i primera koda neke igrice sa nekog "Free flash games" sajta :

<div align="center"><iframe src="http://www.freeonlinegames.com/embed.php?g_id=21551" width="320" height="480" scrolling="no" allowtransparency="true" frameborder="0"></iframe></div><div align="center"><strong><span style="font-size:130%;">
</span></strong></div><div align="center"><span style="font-size:130%;">About<strong> Brick Galaxy </strong>Game<strong> :</strong></span><strong>
</strong></div><div align="left"><strong>
</strong></div><div align="justify"><span style="font-size:130%;"><strong>Brick Galaxy</strong>

[ Br@nkoR @ 29.04.2011. 09:43 ] @

Možeš na primer da sliku staviš u neki elemenat, pa onda na click događaj slike menjaš html kod parent elmenta, nešto kao:

Code (html):

<div><img src="slika.jpg" alt="slika" width="200" height="200" onclick="this.parentNode.innerHTML='<div align=&quot;center&quot;><iframe src=&quot;http://www.freeonlinegames.com/embed.php?g_id=21551&quot; width=&quot;320&quot; height=&quot;480&quot; scrolling=&quot;no&quot; allowtransparency=&quot;true&quot; frameborder=&quot;0&quot;></iframe></div><div align=&quot;center&quot;><strong><span style=&quot;font-size:130%;&quot;></span></strong></div><div align=&quot;center&quot;><span style=&quot;font-size:130%;&quot;>About<strong> Brick Galaxy </strong>Game<strong> :</strong></span><strong></strong></div><div align=&quot;left&quot;><strong></strong></div><div align=&quot;justify&quot;><span style=&quot;font-size:130%;&quot;><strong>Brick Galaxy</strong>'"/></div>

 

[ Inspector @ 29.04.2011. 15:28 ] @

Probao sam neshto ne radi ali moguce je da sam ja kopirao vishe koda sa nekim dodatnim stvarima nego shto treba pa evo da kopiram ponovo ali pravu verziju koda :

<center><iframe src="http://www.freeonlinegames.com/embed.php?g_id=21551" width="320" height="480" scrolling="no" allowtransparency="true" frameborder="0"></iframe></center>

[ Br@nkoR @ 29.04.2011. 17:18 ] @

Hmm...
Hajde da probamo drugačije da generišemo iframe.
HTML

Code (html):

<div><img src="slika.jpg" alt="slika" width="200" height="200" onclick="generateIFrame(this, 'http://www.freeonlinegames.com/embed.php?g_id=21551', 320, 480);"/></div>

JavaScript

Code (javascript):

function generateIFrame(where, url, width, height) {

  var pn = where.parentNode;

  ifr = document.createElement('iframe'); 

  ifr.setAttribute('src', url);

  ifr.setAttribute('scrolling', 'no');

  ifr.setAttribute('allowtransparency', true);

  ifr.setAttribute('frameborder', 0);

  ifr.style.width = width + 'px'; 

  ifr.style.height = height + 'px'; 

  pn.innerHTML = '';

  pn.appendChild(ifr);

}

Dakle click događaj slike poziva se funkcija generateIFrame(), prvi argument funkcije predstavlja sliku, odnosno predstavlja elemeenat na koji je kliknuto, ukoliko poznaješ JS znaćeš da ne objašnjavam, njega ostavi ovako kako sam ja napisao, drugi argument funkcije predstavlja src atribut iframe taga, treći i četvrti argument su width i height atributi iframe taga pošto će se verovatno i oni menjati, odnosno neće biti isti za svaku igricu.

Pozdrav.

[ Milan Kragujevic @ 29.04.2011. 17:18 ] @

Code (html):

<div><img src="slika.jpg" alt="slika" width="200" height="200" onclick="this.parentNode.innerHTML='<center><iframe src="http://www.freeonlinegames.com/embed.php?g_id=21551" width="320" height="480" scrolling="no" allowtransparency="true" frameborder="0"></iframe></center>'"/></div>

 

edit:Preteče me Br@nkoR

[ Br@nkoR @ 29.04.2011. 17:27 ] @

Citat:

Milan Kragujevic:

Code (html):

<div><img src="slika.jpg" alt="slika" width="200" height="200" onclick="this.parentNode.innerHTML='<center><iframe src="http://www.freeonlinegames.com/embed.php?g_id=21551" width="320" height="480" scrolling="no" allowtransparency="true" frameborder="0"></iframe></center>'"/></div>

 

edit:Preteče me Br@nkoR

To neće poleteti :)
Razlog su dupli navodnici unutar innerHTML-a. potrebno ih je prebaciti u odgovarajuće html entitete.

Možda je razlog zašto moj prvi kod nije radio znakovi <> unutar istog pa možeš probati da iste zameniš html entitetima. Mada nije napisano u kom browseru kod nije hteo da radi.

[ Inspector @ 29.04.2011. 20:14 ] @

Radim na Bloggeru inache koristim Operu i stvarno nemam iskustva sa ovim stvarima poshto sve uglavnom radim shablonski i po funkcijama koje tamo imam a evo do sada mi neshto ozbiljniji rad sa html i ostalim stvarima nije ni trebao. Kako da ubacim tu java scriptu da mi je ochita na blogu ? Covek sa Krstarice mi je dao finu ideju za kod ali on je mislio da ja hocu redirekciju ka igri na novoj strani a ne da kada kliknem na dugme igra startuje umesto te slike bez otvaranja nove stranice kao shto sam zeleo na pochetku (mada nije ni ovo toliko losha ideja) ... Evo i tog koda :

<a href="http://www.freeonlinegames.com/games/21551/game.swf" title="Bricks Game" onmouseover="game1.src='http://t1.gstatic.com/images?q...pGl0iLVn5e49k_zxp2hQs1ke4LpYHw'" onmouseout="game1.src='http://t1.gstatic.com/images?q...pGl0iLVn5e49k_zxp2hQs1ke4LpYHw'"><br /> <img src="http://t1.gstatic.com/images?q...pGl0iLVn5e49k_zxp2hQs1ke4LpYHw" name="game1" border="0" /></a>

PRIMER KAKO TO FUNKCIONISE : http://www.alomedia.info/sakalks/primer.php ...

[ Br@nkoR @ 29.04.2011. 20:33 ] @

Pogledaj fajl uz poruku.

[ Inspector @ 30.04.2011. 13:50 ] @

Hvala svima ljudi sad radi kako treba ;) .

[ Br@nkoR @ 30.04.2011. 16:20 ] @

Nema na čemu :)
Evo i ovde da postavim izmenjen kod koji sam poslao na pp prilikom pomoći oko implementacije koda. Dodat je samo efekat "loading" dok se iframe ne učita. Možda nekom zatreba

Code (javascript):

      function generateIFrame(where, url, width, height) {

        var pn = where.parentNode;

        ifr = document.createElement('iframe'); 

        ifr.setAttribute('src', url);

        ifr.setAttribute('scrolling', 'no');

        ifr.setAttribute('allowtransparency', true);

        ifr.setAttribute('frameborder', 0);

        ifr.style.width = width + 'px'; 

        ifr.style.height = height + 'px';

        ifr.style.display = 'none';

        pn.innerHTML = '<span>loading...</span>';

        pn.appendChild(ifr);

        ifr.onload = function() {

          var s =  this.parentNode.getElementsByTagName('span')[0];

          ifr.style.display = '';

          s.parentNode.removeChild(s);

        }

      }

Pozdrav.

[ Inspector @ 30.04.2011. 17:47 ] @

E da samo jos nesto jel moguce da kada kursorom dodjem do slike na koju treba da se klikne obichan kursor postane onaj sa prsticem koji pokazuje da je to kao dugme ? Jel se to menja u ovom glavnom kodu ili ?

[ Milan Kragujevic @ 30.04.2011. 18:07 ] @

Code (html):

<div><a href="javascript:generateIFrame(this, 'http://www.freeonlinegames.com/embed.php?g_id=21551', 320, 480);"><img src="slika.jpg" alt="slika" width="200" height="200"/></a></div>

 

[ Br@nkoR @ 30.04.2011. 18:08 ] @

Dodaj css osobinu cursor koja će imati vrednost pointer;
Npr.

Code:
<img style="cursor: pointer;" src="slika.jpg" alt="slika" width="200" height="200" onclick="generateIFrame(this, 'http://www.freeonlinegames.com/embed.php?g_id=21551', 320, 480);"/>

[ Inspector @ 30.04.2011. 19:04 ] @

To je to sada je sve cool :) ! Hvala vam puno mnogo ste mi pomogli !

[ Br@nkoR @ 30.04.2011. 19:58 ] @

Samo mala napomena, ovaj drugi kod nisam bio testirao u IE i u njemu se javlja problem, zbog načina na koji sam iframe-u dodao funkciju na onload događaj potrebno je to izmeniti i koristiti addEventListener odnosno attachEvent.

Takođe ovo što je @Milan Kragujevic predložio je bolje rešenje, samo bi bilo bolje da se funkcija poziva na click događaj, a u href atribut a taga staviti pravi link do igre u slučaju da browser korisnika ne podržava ili je isključen javascript.

Pozdrav.