Jump to content
MakeWebGames

Blow members minds with the ULTIMATE explore page

Uridium

By Uridium
in General Discussion

 Share

Recommended Posts

Uridium Rising Star

Uridium

Posted
  • Author
Posted

Re: Blow members minds with the ULTIMATE explore page

heres the php script for the explore or 3d explore.

Either call this file vexplore.php or explore.php

Calling it vexplore will give your members a chance to revert back to your original explore.php page you will need to add a link to your explore.php page to point to this one of you choose to name this file vexplore.php

 

 

<?php
include "globals.php";
$tresder=(int) rand(100,999);
if($ir['jail'] or $ir['hospital']) { die("This page cannot be accessed while in jail or hospital."); }
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<font size="3"><font color="yellow">[url="explore.php"]RETURN TO CLASSIC VIEW[/url]



</head>

<body>




<script type="text/javascript">

var dom = (document.getElementById) ? true : false;
var ns5 = (!document.all && dom || window.opera) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true : false;

var origWidth, origHeight;

// avoid error of passing event object in older browsers
if (nodyn) { event = "nope" }

///////////////////////  CUSTOMIZE HERE   ////////////////////
// settings for tooltip 
// Do you want tip to move when mouse moves over link?
var tipFollowMouse= true;	
// Be sure to set tipWidth wide enough for widest image
var tipWidth= 160;
var offX= 20;	// how far from mouse to show tip
var offY= 12; 
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "8pt";
// set default text color and background color for tooltip here
// individual tooltips can have their own (set in messages arrays)
// but don't have to
var tipFontColor= "#ffffff";
var tipBgColor= "#000000";
var tipBorderColor= "#000000";
var tipBorderWidth= 3;
var tipBorderStyle= "ridge";
var tipPadding= 4;

// tooltip content goes here (image, description, optional bgColor, optional textcolor)
var messages = new Array();
// multi-dimensional arrays containing: 
// image and text for tooltip
// Message Array is the use of your Picture so 
// where you see event on your Links that responds to the array picture code
// Illusions
messages[0] = new Array('images/shops.png','',"#000000");
messages[1] = new Array('images/tagent.png','',"#000000");
messages[2] = new Array('images/hof.png','',"#000000");

////////////////////  END OF CUSTOMIZATION AREA  ///////////////////

// preload images that are to appear in tooltip
// from arrays above
if (document.images) {
var theImgs = new Array();
for (var i=0; i<messages.length; i++) {
 	theImgs[i] = new Image();
	theImgs[i].src = messages[i][0];
 }
}

// to layout image and text, 2-row table, image centered in top cell
// these go in var tip in doTooltip function
// startStr goes before image, midStr goes between image and text
var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="';
var midStr = '" border="0"></td></tr><tr><td valign="top">';
var endStr = '</td></tr></table>';

////////////////////////////////////////////////////////////
//  initTip	- initialization for tooltip.
//		Global variables for tooltip. 
//		Set styles
//		Set up mousemove capture if tipFollowMouse set true.
////////////////////////////////////////////////////////////
var tooltip, tipcss;
function initTip() {
if (nodyn) return;
tooltip = (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
tipcss = tooltip.style;
if (ie4||ie5||ns5) {	// ns4 would lose all this on rewrites
	tipcss.width = tipWidth+"px";
	tipcss.fontFamily = tipFontFamily;
	tipcss.fontSize = tipFontSize;
	tipcss.color = tipFontColor;
	tipcss.backgroundColor = tipBgColor;
	tipcss.borderColor = tipBorderColor;
	tipcss.borderWidth = tipBorderWidth+"px";
	tipcss.padding = tipPadding+"px";
	tipcss.borderStyle = tipBorderStyle;
}
if (tooltip&&tipFollowMouse) {
	document.onmousemove = trackMouse;
}
}

window.onload = initTip;

/////////////////////////////////////////////////
//  doTooltip function
//			Assembles content for tooltip and writes 
//			it to tipDiv
/////////////////////////////////////////////////
var t1,t2;	// for setTimeouts
var tipOn = false;	// check if over tooltip link
function doTooltip(evt,num) {
if (!tooltip) return;
if (t1) clearTimeout(t1);	if (t2) clearTimeout(t2);
tipOn = true;
// set colors if included in messages array
if (messages[num][2])	var curBgColor = messages[num][2];
else curBgColor = tipBgColor;
if (messages[num][3])	var curFontColor = messages[num][3];
else curFontColor = tipFontColor;
if (ie4||ie5||ns5) {
	var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
	tipcss.backgroundColor = curBgColor;
 	tooltip.innerHTML = tip;
}
if (!tipFollowMouse) positionTip(evt);
else t1=setTimeout("tipcss.visibility='visible'",100);
}

var mouseX, mouseY;
function trackMouse(evt) {
standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
if (tipOn) positionTip(evt);
}

/////////////////////////////////////////////////////////////
//  positionTip function
//		If tipFollowMouse set false, so trackMouse function
//		not being used, get position of mouseover event.
//		Calculations use mouseover event position,
//		offset amounts and tooltip width to position
//		tooltip within window.
/////////////////////////////////////////////////////////////
function positionTip(evt) {
if (!tipFollowMouse) {
	standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
	mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
	mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
}
// tooltip width and height
var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
// document area in view (subtract scrollbar width for ns)
var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
// check mouse position against tip and window dimensions
// and position the tooltip 
if ((mouseX+offX+tpWd)>winWd) 
	tipcss.left = mouseX-(tpWd+offX)+"px";
else tipcss.left = mouseX+offX+"px";
if ((mouseY+offY+tpHt)>winHt) 
	tipcss.top = winHt-(tpHt+offY)+"px";
else tipcss.top = mouseY+offY+"px";
if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
}

function hideTip() {
if (!tooltip) return;
t2=setTimeout("tipcss.visibility='hidden'",100);
tipOn = false;
}

document.write('<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>')

</script>



<div>

[img=SSC-campus_map2004.jpg]

</div>

<div>
<map id="SSC-campus_map2004" name="SSC-campus_map2004">
<area shape="circle" alt="" coords="170,59,9" href="" onmouseover="doTooltip(event,0)" onmouseout="hideTip()" />
<area shape="circle" alt="" coords="185,42,10" href="" title="" />
<area shape="circle" alt="" coords="224,44,11" href="" title="" />
<area shape="circle" alt="" coords="213,84,10" href="" title="" />
<area shape="circle" alt="" coords="328,96,13" href="" onmouseover="doTooltip(event,1)" onmouseout="hideTip()" />
<area shape="circle" alt="" coords="180,255,9" href="" onmouseover="doTooltip(event,1)" onmouseout="hideTip()" />
<area shape="circle" alt="" coords="115,329,11" href="" onmouseover="doTooltip(event,1)" onmouseout="hideTip()" />
<area shape="circle" alt="" coords="287,343,9" href="" onmouseover="doTooltip(event,1)" onmouseout="hideTip()" />
<area shape="circle" alt="" coords="520,343,15" href="" onmouseover="doTooltip(event,1)" onmouseout="hideTip()" />
<area shape="circle" alt="" coords="365,85,15" href="" onmouseover="doTooltip(event,1)" onmouseout="hideTip()" />
<area shape="circle" alt="" coords="113,220,9" href="" title="" />
<area shape="circle" alt="" coords="85,262,10" href="" title="" />
<area shape="circle" alt="" coords="116,305,10" href="" title="" />
<area shape="circle" alt="" coords="145,320,8" href="" title="" />
<area shape="circle" alt="" coords="179,327,10" href="" title="" />
<area shape="circle" alt="" coords="196,308,9" href="" title="" />
<area shape="circle" alt="" coords="186,277,9" href="" title="" />
<area shape="circle" alt="" coords="238,281,9" href="" title="" />
<area shape="circle" alt="" coords="231,309,9" href="" title="" />
<area shape="circle" alt="" coords="244,328,9" href="" title="" />
<area shape="circle" alt="" coords="297,307,11" href="" title="" />
<area shape="circle" alt="" coords="325,288,9" href="" title="" />
<area shape="circle" alt="" coords="368,256,9" href="" title="" />
<area shape="circle" alt="" coords="340,69,8" href="" title="" />
<area shape="circle" alt="" coords="297,84,10" href="" title="" />
<area shape="circle" alt="" coords="297,116,10" href="" title="" />
<area shape="circle" alt="" coords="408,83,11" href="" title="" />
<area shape="circle" alt="" coords="153,158,10" href="" title="" />
<area shape="circle" alt="" coords="182,188,12" href="" title="" />
<area shape="circle" alt="" coords="274,185,9" href="" title="" />
<area shape="circle" alt="" coords="314,172,9" href="" title="" />
<area shape="circle" alt="" coords="339,172,9" href="" title="" />
<area shape="circle" alt="" coords="391,173,11" href="" title="" />
<area shape="circle" alt="" coords="360,213,13" href="" title="" />
<area shape="circle" alt="" coords="363,315,12" href="" title="" />
<area shape="circle" alt="" coords="388,297,10" href="" onmouseover="doTooltip(event,2)" onmouseout="hideTip()" />
<area shape="circle" alt="" coords="416,312,13" href="" title="" />
<area shape="circle" alt="" coords="464,315,12" href="" title="" />
<area shape="default" nohref="nohref" alt=" " />
</map>
</div>
</body>

</html>
<?php
print "<font color=yellow>[b]This is your referal link: http://{$domain}/register.php?REF=$userid <b/></font>


Every signup from this link earns you two valuable crystals when they reach level 3!";
?>

 

You can add the Mouse over Images Manually find this code in the script above and add to it remember also that the tooltip function needs to have the array pics ID#

 

messages[0] = new Array('images/shops.png','',"#000000");
messages[1] = new Array('images/tagent.png','',"#000000");
messages[2] = new Array('images/hof.png','',"#000000");

 

Image for the Above save image as SSC-campus_map2004.jpg

www.nightdreamer2000.com/SSC-campus_map2004.jpg

Joel Newbie

Joel

Posted
Posted

Re: Blow members minds with the ULTIMATE explore page

Oh and also if you have Dream weaver then this would be the easiest thing you could do, On dream weaver there is a Hotspot tool which will make a link anywhere on the image you want and you can keep making links on the same image, pretty simple if you have Dream weaver.

jimmytubbs Newbie

jimmytubbs

Posted
Posted

Re: Blow members minds with the ULTIMATE explore page

 

Its not as simple as just putting the coding up Basically because its a plotted graph or imagemap

And will only work with a picture youve selected and plotted for links to be clicked on..

example if your plotted target was the number 20 on this clock..

mint.png

Then the cordinates would be 142,108,163,129

and your code would be

 

[img=mint.png]



<map id="mint" name="mint">
<area shape="rect" alt="" coords="142,108,163,129" href="somewhere.com" title="" />
<area shape="default" nohref="nohref" alt="" />
</map>

 

 

How do you find out what the sepcific co-ords are of one part and how do you get the image of a rectangle to show up?

Uridium Rising Star

Uridium

Posted
  • Author
Posted

Re: Blow members minds with the ULTIMATE explore page

This can be done a number of ways an imagemap generator is the easiest if you dont have one you can use Microsoft Paint.....

Microsoft Paint has Co-Ords on the bottom Right of screen.. so for a box shape choose a point on your picture and note down the Co-ords on the right. The move down and across right with your mouse to another point on the picture and note that number down...

That will Create a full grid with 4 Co-ords....

Guest Anonymous

Guest Anonymous

Posted
Posted

Re: Blow members minds with the ULTIMATE explore page

There are plenty of tool son the web for this, my own tool of choice is surprisingly simple: an image editor. Using that, I just point at each "point" in a polygon surrounding the area I was to map, and add those to my coords.

Look at the current AS login page - The signpost is image mapped - with 5 coordinates needed to construct the each "hot" area.

I loaded the signpost image up into the Gimp, (similar to photoshop / paintshop), pointed at the corners of each sign, and noted those in the image map.

Simple stuff - However there are specific tools available for this. I believe mdshare knows of at least one, as we were discussing this in chat recently.

mdshare Newbie

mdshare

Posted
Posted

Re: Blow members minds with the ULTIMATE explore page

Yea I have 3 licenses for all coffeecup software, I should pass one to you Nyna.

Coffeecup has a excellent image mapper tool.

Often imitated Never duplicated !

CoffeeCup Image Mapper has mouseover HTML capability, includes a fully functional image map wizard, and enables users to attach parts of an image to different links. Image Mapper can map any noninterlaced GIF, interlaced GIF, standard JPEG, and progressive JPEG, PNG as well as the first frame of an animated GIF. Users can choose from three different shape methods for mapping those hard-to-reach spots. Image Mapper supports mouseover pop-up tags, frame targeting, image previewing, and link and mouseover memory.

Video tutorial: http://www.coffeecup.com/image-mapper/help/tutorials/

Direct link: http://www.coffeecup.com/image-mapper/

mdshare Newbie

mdshare

Posted
Posted

Re: Blow members minds with the ULTIMATE explore page

 

Sounds like the perfect program! What's the downside?

That you are nothing with it if you can't read/understand the generated source code.

Guest Anonymous

Guest Anonymous

Posted
Posted

Re: Blow members minds with the ULTIMATE explore page

 

Sounds like the perfect program! What's the downside?

It runs on Windows.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...