Jump to content

Imagemap Game And Cookies


Ansku
 Share

Recommended Posts

Hi,I´m very new to javascript and I´m trying to make an imagemap game, which is very simple: get key and open door with it. I know I have to use cookies to make the whole thing work, but because my skills with js are limited, I have few problems:1. Setting the cookie.In this case the KEY is this pack of coffee: http://www.virtuaalitalliseppele.com/artsi...lik/juhlis.htm/So, if i write setCookie-code to head-section, is the cookie set, when this page is loaded (when this coffee is found)?CookieName is juhlis, value juhlis02, and expiration in 30 days.Is this right:

function SetCookie(juhlis,juhlis02,30) { var today = new Date(); var expire = new Date(); if (30==null || 30==0) 30=1; expire.setTime(today.getTime() + 3600000*24*30); document.cookie = juhlis+"="+escape(juhlis02)				 + ";expires="+expire.toGMTString();}		   + ";expires="+expire.toGMTString();}

?2. Getting the cookieThere is another page with imagemap and you can make coffee, if you have found the pack of coffee.Is this the right way of getting the cookie (in head-section):

function getCookie(juhlis) { var theCookie=""+document.cookie; var ind=theCookie.indexOf(juhlis); if (ind==-1 || juhlis=="") return "";  var ind1=theCookie.indexOf(';',ind); if (ind1==-1) ind1=theCookie.length;  return unescape(theCookie.substring(ind+juhlis.length+1,ind1));}

?3. Making the map-code change whether you have found the coffee or not.So I can use the same image for both of the maps, only the map-code should change. Image: http://www.virtuaalitalliseppele.com/artsi...at/tupa03n.jpg/Page: http://www.virtuaalitalliseppele.com/artsi...i/klik/001.htm/3a Do I need set variables? I konw I have to write something like this:

if(getCookie('juhlis') == 1){  image="image.jpg";  imap="#map02";}else{  image="image.jpg";  imap="#map01";}

3b Where do I put that code in body or in head-section?3c If I have to use javascript in body, how the images show and maps work "inside" javascript (if I have to put them there)?Code for mapping:

<map id="tupa02" name="tupa02"><area shape="rect" coords="0,157,29,605" onMouseOver="writeText('Eteiseen')"onMouseOut="writeText('')"alt="Eteiseen"title="Eteiseen"href="/artsintalli/klik/taloet.htm"><area shape="rect" coords="572,239,631,294" onMouseOver="writeText('Olohuoneeseen')"onMouseOut="writeText('')"alt="Olohuoneeseen"title="Olohuoneeseen"href="/artsintalli/klik/talo02.htm"><area shape="rect" coords="464,99,511,125" onMouseOver="writeText('Krrrrr krrr...')"onMouseOut="writeText('')"alt="Tonttu"title="Tonttu"style="cursor: pointer;"><area shape="rect" coords="431,271,480,310" onMouseOver="writeText('Keitä kahvi')"onMouseOut="writeText('')"alt="Keitä kahvi'"title="Keitä kahvi'"href="/artsintalli/klik/002.htm"></map>

If you can help me in even some parts, I would be very grateful. =)

Edited by Ansku
Link to comment
Share on other sites

You're not using the functions correctly. When you define a function you can say if it accepts parameters. A function definition like this:function SetCookie(juhlis,juhlis02,30) {says that the function accepts 3 parameters. Function parameters are variables, not constants. It's not legal to use 30 as a parameter name, that's a constant value. You can either define a function that takes a name, value, and expiration and uses those variables, or define a function that doesn't take any parameters and just use constants in the function. So either this:

function SetCookie(name, val, exp) {  var today = new Date();  var expire = new Date();  if (exp==null || exp==0) exp=1;  expire.setTime(today.getTime() + 3600000*24*exp);  document.cookie = name+"="+escape(val) + ";expires="+expire.toGMTString();}// run the functionSetCookie('juhlis', 'juhlis02', 30);

or this:

function SetCookie() {  var today = new Date();  var expire = new Date();  expire.setTime(today.getTime() + 3600000*24*30);  document.cookie = "juhlis=juhlis02;expires="+expire.toGMTString();}// run the functionSetCookie();

The first version lets you tell the function what name, value, and expiration to use for the cookie, and the second version uses hard-coded values for those. Your GetCookie function is sort of similar, you can either use a parameter that you set a value for, or you can just use a hard-coded value for the cookie name. Doing this:function getCookie(juhlis) {does not send the text "juhlis" to the function, it uses a variable with the name juhlis. You'll probably want to find a Javascript function reference and go through it to see how to define and use functions.

Link to comment
Share on other sites

Thanks! Is this right then:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><html><head><title>Artsin ravitalli</title><link rel="stylesheet"type="text/css" href="/artsintalli/file/klikcss.css"><script type="text/javascript">function SetCookie(name, val, exp) {  var today = new Date();  var expire = new Date();  if (exp==null || exp==0) exp=1;  expire.setTime(today.getTime() + 3600000*24*exp);  document.cookie = name+"="+escape(val) + ";expires="+expire.toGMTString();}</script></head><body onload=SetCookie('juhlis', 'juhlis02', 30);><CENTER><img src="/artsintalli/klik/kuvat/juhlis02.jpg" border="0"><p>Löysit Juhla Mokka-paketin!</p><CENTER></body></html>

Link to comment
Share on other sites

That should set a cookie called juhlis with the value juhlis02 that expires in 30 hours. You can check though, you can look at all of the cookies that your browser has set.
Thanks, justsomeguy, I got the setCookie-part working right now. Now the biggest problem is that map-variable. Do I have to use DOM imageObject.useMap=URL nside javascript function or what to get map working, wheter the cookie is get or not?
Link to comment
Share on other sites

Okay okay, more help needed here! =DGetting the Cookie: In head-section:

function getCookie(juhla){  if (document.cookie.length>0){	c_start=document.cookie.indexOf(juhla + "=");	if (c_start!=-1){ 	  c_start=c_start + juhla.length+1; 	  c_end=document.cookie.indexOf(";",c_start);	  if (c_end==-1)		c_end=document.cookie.length;	  return unescape(document.cookie.substring(c_start,c_end));  };};  return "";};

An then:

<body onLoad="getCookie(juhla)">

Should it work?And I´ve tried everything reading the maps, is this right:

function kartta(){if(getCookie('juhla') {  document.getElementById("tupa").useMap="#tupa02"  }  else  {  document.getElementById("tupa").useMap="#tupa01"  }}

?

Link to comment
Share on other sites

Nevermind!!It works now!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><html><head><title>Artsin ravitalli</title><link rel="stylesheet"type="text/css" href="/artsintalli/file/klikcss.css"><script type="text/javascript">function getCookie(juhla){  if (document.cookie.length>0){	c_start=document.cookie.indexOf(juhla + "=");	if (c_start!=-1){ 	  c_start=c_start + juhla.length+1; 	  c_end=document.cookie.indexOf(";",c_start);	  if (c_end==-1)		c_end=document.cookie.length;	  return unescape(document.cookie.substring(c_start,c_end));  };};  return "";};function writeText(txt){document.getElementById("desc").innerHTML=txt;}</script><script type="text/javascript">function kartta(){if (getCookie('juhla')) {  document.getElementById("tupa").useMap="#tupa02"  }  else  {  document.getElementById("tupa").useMap="#tupa01"  }}</script></head><body onLoad="getCookie('juhla')"><div class="content"><CENTER><a href="/artsintalli/etu.htm">Artsin Ravitalli</a> - <a href="/artsintalli/klik/etupiha01.htm">Klikkailun alkuun</a><br><hr><h3>Tupa</h3><img id="tupa" src="/artsintalli/klik/kuvat/tupa03n.jpg" border="0" onLoad="kartta()" usemap="#tupa01"><map id="tupa02" name="tupa02"><area shape="rect" coords="0,157,29,605" onMouseOver="writeText('Eteiseen')"onMouseOut="writeText('')"alt="Eteiseen"title="Eteiseen"href="/artsintalli/klik/taloet.htm"><area shape="rect" coords="572,239,631,294" onMouseOver="writeText('Olohuoneeseen')"onMouseOut="writeText('')"alt="Olohuoneeseen"title="Olohuoneeseen"href="/artsintalli/klik/talo02.htm"><area shape="rect" coords="464,99,511,125" onMouseOver="writeText('Krrrrr krrr...')"onMouseOut="writeText('')"alt="Tonttu"title="Tonttu"style="cursor: pointer;"><area shape="rect" coords="431,271,480,310" onMouseOver="writeText('Keitä kahvi')"onMouseOut="writeText('')"alt="Keitä kahvi"title="Keitä kahvi"href="/artsintalli/klik/002.htm"></map><map id="tupa01" name="tupa01"><area shape="rect" coords="0,157,29,605" onMouseOver="writeText('Eteiseen')"onMouseOut="writeText('')"alt="Eteiseen"title="Eteiseen"href="/artsintalli/klik/taloet.htm"><area shape="rect" coords="572,239,631,294" onMouseOver="writeText('Olohuoneeseen')"onMouseOut="writeText('')"alt="Olohuoneeseen"title="Olohuoneeseen"href="/artsintalli/klik/talo02.htm"><area shape="rect" coords="431,271,480,310" onMouseOver="writeText('Kahvi loppu')"onMouseOut="writeText('')"alt="Kahvi loppu"title="Kahvi loppu"style="cursor: pointer;"><area shape="rect" coords="464,99,511,125" onMouseOver="writeText('Krrrrr krrr...')"onMouseOut="writeText('')"alt="Tonttu"title="Tonttu"style="cursor: pointer;"></map><p id="desc"></p></CENTER></div></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...