Mysidia Adoptables Support Forum  

Home Community Mys-Script Creative Off-Topic
Go Back   Mysidia Adoptables Support Forum > Mysidia Adoptables > Tutorials and Tips

Notices

Reply
 
Thread Tools Display Modes
  #1  
Old 10-14-2010, 11:34 PM
Hall of Famer's Avatar
Hall of Famer Hall of Famer is offline
Administrator, Lead Coder
 
Join Date: Dec 2008
Location: South Brunswick
Posts: 4,448
Gender: Male
Credits: 327,390
Hall of Famer is on a distinguished road
Default (How to...) Create a map for your adoptable site

Well this is actually quite easy to do for some of you, so its simply a tutorial for newbie programmers who do not know how to add html to php codes. I am also posting this seeing no one else has ever made a tutorial for map system yet. Keep in mind that this is a tutorial rather than an addon script Miss Kaeliah has been doing. So do not add it directly to your site or you get tons of errors. I am using the map page of PokeMansion as the demo site, take a look at it to see exactly how it works:
http://www.pokemansion.net/map.php

To create a map file, the first thing to do is to construct a completely blank php file. This is your template to create any possible scripts:

PHP Code:
<?php

// **********************************************************************
// Rusnak PHP Adoptables Script
// Copyright 2009 Brandon Rusnak
// For help and support: http://www.rusnakweb.com/forum/
//
// Redistribution prohibited without written permission
// **********************************************************************

// Wake the sleeping giant

// **********************************************************************
// Basic Configuration Info
// **********************************************************************

include("inc/functions.php");
include(
"inc/config.php");
include(
"inc/bbcode.php");

$themeurl grabanysetting("themeurl");

// **********************************************************************
// Define our top links by calling getlinks()
// **********************************************************************

$links getlinks();

// **********************************************************************
// Define our ads by calling getads()
// **********************************************************************

$ads getads("any");

// **********************************************************************
// Grab any dynamic article content from the content table
// **********************************************************************

$pagecontent getsitecontent("");
$article_title $pagecontent[title];
$article_content $pagecontent[content];


// Convert the BBCODE to HTML
$article_content bbconvert($article_content);

// Convert line breaks to <br>
$article_content nl2br($article_content);

// **********************************************************************
// Grab any settings that we will need for the current page from the DB
// **********************************************************************

$browsertitle grabanysetting("browsertitle");
$sitename grabanysetting("sitename");
$slogan grabanysetting("slogan");

// **********************************************************************
// Check and see if the user is logged in to the site
// **********************************************************************

$loginstatus logincheck();
$isloggedin $loginstatus[loginstatus];
$loggedinname $loginstatus[username];

// **********************************************************************
// End Prepwork - Output the page to the user
// **********************************************************************



// **********************************************************************
// Begin Template Definition
// **********************************************************************

//Define our current theme
$file $themeurl;

// Do the template changes and echo the ready template
$template file_get_contents($file);

$template replace(':ARTICLETITLE:',$article_title,$template);
$template replace(':ARTICLECONTENT:',$article_content,$template);
$template replace(':ARTICLEDATE:',$article_date,$template);

$template replace(':BROWSERTITLE:',$browsertitle,$template);
$template replace(':SITENAME:',$sitename,$template);

//Define our links
$template replace(':LINKSBAR:',$links,$template);

//Get the content for the side bar...

$sidebar getsidebar();
$template replace(':SIDEFEED:',$sidebar,$template);

//Get the ad content...
$template replace(':ADS:',$ads,$template);

//Get the slogan info
$template replace(':SLOGAN:',$slogan,$template);


echo 
$template;

// **********************************************************************
// End Template Definition
// **********************************************************************



?>
Note that this blank template doesnt do anything, but it helps when you wish to create a new php script file on your own. To implement html in php, the first thing to do is to add html head and body codes to the very beginning of your script file:

PHP Code:
<html>
<
head>

</
head>
<
body
Also add this codes to the very end of your script file:

PHP Code:
</body>
</
html
By doing this, you can write a successful html script on top of your php codes without getting an error.

For a map system, we will be using the tag 'map'. What you should do before entering the information of a map is to define where the map image will be displayed on that page. To do this, simply use 'div style' code here:

PHP Code:
<div style="position: absolute; left: [b]X[/b]px; top: [b]Y[/b]px;"
This looks like css, isnt it? All you have to do here is to adjust the values entered for the highlighted part in the code. In my example, I am using 282px and 175px, but these are highly customizable.

The next thing to do is to specify the name and url of your map, the structure of the codes is provided below:

PHP Code:
<img border="0" alt="[b]Your Map's Name[/b]" src="[b]Your Map's url[/b]"/> 
However, you may want to add some special css effects so that the name of each location on your map will be displayed once you move your mouse onto it. Simply modify the script a little bit to add the 'Mouseover' codes to your script file, which should look like this:

PHP Code:
<img border="0" alt="[b]Your Map's Name[/b]" src="[b]Your Map's url[/b]" id="[b]Your Map's Name[/b]" onMouseOver="mouseOver()" onMouseOut="mouseOut()" usemap="#[b]Your Map's Name[/b]" /> 
This should take care of the settings of your map file. The very last thing to do, well, is apparently to specify each location on your map image. The codes structure is provided below:

PHP Code:
<map name="[b]Your Map's Name[/b]">
<
area shape="[b]shape[/b]" coords="[b]Coordinates that cover the area of your shape[/b]" title="[b]Location Name[/b]" alt="[b]Location Name[/b]" href="[b]Destination url[/b]" />
</
map
As you can see from above, this map script consists of five different fields. The first one is still the Map's name of yours, which should be completely your choice. The second one is called shape, which can be a rectangle, a circle, or even a triangle at times. For a rectangle, you should use the format (Upper left corner, Upper right corner, Lower left corner, Lower right corder), for a circle you simply need to enter the radius and the center point of your circular area. The Location name is a name specified for this particular area of your map, so do not confuse it with your Map's name. The last component is the your destination url, and you will be directed to this url if you click on the map. An example of the map code will look like this, you can just add multiple of such code within your map tag so that it can direct users to more than just one locations on the map:

PHP Code:
<area shape="rect" coords="227,174,275,225" title="Trainer Info" alt="Trainer Info" href="http://www.pokemansion.net/account.php" /> 
Alright, you are almost done. Just do not forget to enclose your html body code with this just above the point where your actual php code starts:

PHP Code:
 </div>
</
font
I havent tested on this yet, but it looks like it is not a big deal if you place the map codes at the bottom or even in the middle of your php codes. All you have to do is to know how to integrate html with php, and apparently advanced programmers know much better than this so I wont explain. Its not really a complicated script, but it can be quite useful for an adoptable site. Enjoy!

Hall of Famer

Alright, you are almost done, just
Reply With Quote
  #2  
Old 10-15-2010, 01:36 AM
Kaeliah's Avatar
Kaeliah Kaeliah is offline
Premium Member
 
Join Date: Sep 2010
Location: Pennsylvania, United States
Posts: 485
Gender: Female
Credits: 31,863
Kaeliah will become famous soon enough
Send a message via AIM to Kaeliah Send a message via MSN to Kaeliah
Default RE: (How to...) Create a map for your adoptable site

Image maps are VERY useful. I'm sure someone will find this handy. I've been doing HTML/CSS since I was 10 soo I'm kinda well versed but please keep making tutorials!! The more beginners can learn here the more activity we'll have. :3
__________________
[My Shop] ♥ [My Blog] ♥ [Subscribe] ♥ [My Mods] ♥ [Mod TOS]
Reply With Quote
  #3  
Old 10-15-2010, 02:53 AM
Hall of Famer's Avatar
Hall of Famer Hall of Famer is offline
Administrator, Lead Coder
 
Join Date: Dec 2008
Location: South Brunswick
Posts: 4,448
Gender: Male
Credits: 327,390
Hall of Famer is on a distinguished road
Default RE: (How to...) Create a map for your adoptable site

Thanks for the comment Miss Kaeliah. And yeah, next time I'd consider a tutorial on how to add NPCs and other objects to an image map using either HTML or PHP, shouldnt be hard either but guess its fun. XD
Reply With Quote
  #4  
Old 10-15-2010, 08:57 AM
Kaeliah's Avatar
Kaeliah Kaeliah is offline
Premium Member
 
Join Date: Sep 2010
Location: Pennsylvania, United States
Posts: 485
Gender: Female
Credits: 31,863
Kaeliah will become famous soon enough
Send a message via AIM to Kaeliah Send a message via MSN to Kaeliah
Default RE: (How to...) Create a map for your adoptable site

I usually cheat and use an image map maker for my image maps. It's so tedius making them, especially if you have a bunch to make. x.x When I open my site it's gonna have a halloween/fall theme already set up. The halloween theme/event will end after about 10 days but I've been working on this corn maze that is incredibly awesome(I think). I may leave that up there until December. But it uses image maps, and there's a bunch of them! Plus I'll be adding little things to it like a random jewel or egg somewhere that you can collect. I'm also creating a way to make it so you can only grab it once. ^.^ Corn Maze table! I'll delete it in the winter but yeaahhh lotsa work!
__________________
[My Shop] ♥ [My Blog] ♥ [Subscribe] ♥ [My Mods] ♥ [Mod TOS]
Reply With Quote
  #5  
Old 10-29-2010, 04:31 AM
Harrison jess Harrison jess is offline
Member
 
Join Date: Oct 2010
Posts: 2
Credits: 138
Harrison jess
Default RE: (How to...) Create a map for your adoptable site

hi Hall of Famer,...
the images map shared here was really nice,..
its very nice looking,...thanks for this work dude,...nice effort,..
Reply With Quote
  #6  
Old 11-08-2010, 11:16 AM
Hall of Famer's Avatar
Hall of Famer Hall of Famer is offline
Administrator, Lead Coder
 
Join Date: Dec 2008
Location: South Brunswick
Posts: 4,448
Gender: Male
Credits: 327,390
Hall of Famer is on a distinguished road
Default RE: (How to...) Create a map for your adoptable site

Thank you very much for the comments Harrison Jess. This is by no means a mod/addon that can be directly copied to their pet site, it is more of a tutorial for users who aspire to create a customized map system. It is hard to do a general map engine for rusnak adoptable though, unless I can somehow add functions to admincp for users to create images, locations and direction urls in a more convenient way.
Reply With Quote
  #7  
Old 09-19-2012, 05:46 PM
schepers12's Avatar
schepers12 schepers12 is offline
Member
 
Join Date: Sep 2012
Location: netherlands
Posts: 30
Gender: Male
Credits: 7,798
schepers12 is on a distinguished road
Default

do you mean something like this?
i've made it upon your tutorial, and it works very good on my (localhost!) site :D

*for people who want a woking script, ready to integrate, read below:*
___
the attached zip file includes a complete working map, you only need to change the titles and link url's in map.php, after that, put a link to "map.php" on your site :)
___

schepers12
Attached Files
File Type: zip map.zip (525.4 KB, 21 views)
Reply With Quote
  #8  
Old 09-19-2012, 06:09 PM
Hall of Famer's Avatar
Hall of Famer Hall of Famer is offline
Administrator, Lead Coder
 
Join Date: Dec 2008
Location: South Brunswick
Posts: 4,448
Gender: Male
Credits: 327,390
Hall of Famer is on a distinguished road
Default

Well actually this thread was almost 2 years old. It was my very first attempt at making a tutorial, I was merely an amateur at programming back then. Glad to know the code still works, it was really basic html. In Mys v1.6.0 I plan to incorporate a customizable exploration system in which you can create your own maps, locations, npcs in an integrated fashion. Don't expect it to be done earlier than 2014 though. XD
__________________


Mysidia Adoptables, a free and ever-improving script for aspiring adoptables/pets site.
Reply With Quote
  #9  
Old 09-20-2012, 04:10 PM
schepers12's Avatar
schepers12 schepers12 is offline
Member
 
Join Date: Sep 2012
Location: netherlands
Posts: 30
Gender: Male
Credits: 7,798
schepers12 is on a distinguished road
Default

by the way, if you want an individual image for every building without one large image (better for editing), you might want to use something like this as your map script :

PHP Code:
<?php

include("functions/functions.php");

//***************//
//  START SCRIPT //
//***************//
/*
NOTE THAT THE "margin-top" IS RELATIVE TO THE PREVIOUS BUILDING IN THE LIST BELOW HERE!!
also note that the last building needs to be the one which is the lowest on your map, otherwise you might have template errors ;3
note 2: the background of your map is defined in the first div
*/
$article_title "Map";
$article_content .= '<div style="background: url(picuploads/map/bg.png);"><br /><br />
<div style="margin-left:100px;margin-top:100px; width:100px; height:100px;"><a href="index.php"><img border="0" src="picuploads/map/house1.png" /></a></div>
<div style="margin-left:250px;margin-top:-150px; width:100px; height:100px;"><a href="index.php"><img border="0" src="picuploads/map/house2.png" /></a></div>
<div style="margin-left:400px;margin-top:-100px; width:200px; height:150px;"><a href="index.php"><img border="0" src="picuploads/map/house3.png" /></a></div>
<div style="margin-left:550px;margin-top:-50px; width:180px; height:115px;"><a href="index.php"><img border="0" src="picuploads/map/house4.png" /></a></div>
<div style="margin-left:50px;margin-top:-50px; width:165px; height:130px;"><a href="index.php"><img border="0" src="picuploads/map/house5.png" /></a></div>
<div style="margin-left:740px;margin-top:-300px; width:165px; height:115px;"><a href="index.php"><img border="0" src="picuploads/map/house6.png" /></a></div>
<div style="margin-left:450px;margin-top:80px; width:100px; height:90px;"><a href="index.php"><img border="0" src="picuploads/map/house7.png" /></a></div>
</div>
<br />'
;
//***************//
//  OUTPUT PAGE  //
//***************//
echo showpage($article_title$article_content$date);
?>
which is a bit more work i guess, but for example: you can change the position of the buildings by using the html codes, and not editing the whole backgrund ;)

(also the reason i'm using it currently)
Reply With Quote
  #10  
Old 09-20-2012, 05:11 PM
Hall of Famer's Avatar
Hall of Famer Hall of Famer is offline
Administrator, Lead Coder
 
Join Date: Dec 2008
Location: South Brunswick
Posts: 4,448
Gender: Male
Credits: 327,390
Hall of Famer is on a distinguished road
Default

Well yeah, would be nicer to enable admins to add sub-images onto the background image. This works out nicely for a real map field, in which you can add npcs into the maps at various location. The npcs may be able to 'walk' on the map, so using.gif images or specifies its possible 'movement' path is a good idea. Anyway I will try to incorporate this into the script by the time Mys v1.6.0 is under development.
__________________


Mysidia Adoptables, a free and ever-improving script for aspiring adoptables/pets site.
Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
How do i create my site? crystalwolftear Feedback and Suggestions 3 04-28-2014 10:48 PM
Ratties FTW! - A Rat Adoptable Site AlexC Adoptables Buzz 68 05-07-2012 06:10 AM
Create your own Pet site/Virtual world for free ! niranbd Other Chat 7 02-02-2012 11:15 AM
Someone Know a site for create Theme??(Solved) SieghartZeke Questions and Supports 11 10-10-2009 06:21 PM
my adoptable site aroymart Adoptables Sites Showcase 7 03-08-2009 08:18 PM


All times are GMT -5. The time now is 08:26 AM.

Currently Active Users: 440 (0 members and 440 guests)
Threads: 4,080, Posts: 32,024, Members: 2,016
Welcome to our newest members, jolob.
BETA





What's New?

What's Hot?

What's Popular?


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2024, vBulletin Solutions Inc.
vBCommerce I v2.0.0 Gold ©2010, PixelFX Studios
vBCredits I v2.0.0 Gold ©2010, PixelFX Studios
Emoticons by darkmoon3636