What im trying to do is make a interactive collectible map as a part of a collectible guide for a game. The main image (grid in this case) will be the map of an area in a game. On the map there will be icons for the locations of the collectibles. Upon clicking the icon for the collectible it will create a red x over the icon so the person will know they have collected it. This red x will be an image on top of the main map and will need to be at the exact coordinates of the image map for that collectible.
this is a code example of what i mean. this is a map with 1 single collectible on it if the result from the db says the user has collected it then mark it red.
<img src = "grid.png" usemap="#checklist"/>
<map name="checklist">
<?php
if(collectible1 != "collected")//if it isnt collected dont alter the map
{
echo '<area shape="rect" coords="0,0,82,126" href="# //some AJAX call to update DB">';
}
else
{
//display a redX image at exact same coordinates as area above
}
?>
</map>
i want this to be a dynamic page so i can use it for many different collectible maps i just pass it all the image map area coordinates and it will generate the image map. I can do everything in terms of the DB interaction and AJAX i just cant figure out how to make an image display on top of another image without having to use a div and manually figure out every single location in pixels
Did a bit of work and figured out if i used a circle to mark the position of the image map i was then able to use the x and y coordinates of that area with a div position. Obviously session variables wont be used in the final thing i will use variables taken from the DB but this does what it should functionally. the circle works by having (x, y, radius) So simply store the x and y coordinates of the location in the DB and the radius can be defined by the size of the icons on the map. When the call to the db is made insert the x and y into either the css for the div or into the coordinates for the map area.
<?php
session_start();
?>
<html>
<head>
<title></title>
<style>
#collectible1
{
left: 355;
top: 357;
position: absolute;
}
</style>
</head>
<body>
<div id = "collectiblemap">
<img src = "grid.png" usemap="#checklist"/>
<map name="checklist">
<?php
if(!isset($_SESSION['found']))
{
$_SESSION['found'] = false;
}
if($_SESSION['found'] == true)
{
echo '<div id = "collectible1"><img src = "greenimg.jpg"/></div>';
}
else
{
echo '<area shape="circle" coords="355,357,19" href="found.php" alt="">';
}
?>
</map>
</div>
</body>
</html>
The found.php file simply sets the session var to true if it is false and false if its true.
Related
I am a beginner in html. I have an image that has to be displayed on the overlay,when a button is pressed. Th problem is the image doesnot appear on the overlay for the first time. It appers only from the second time and then it works properly. If I refresh my page and do it again the image does not appear. The removing part has no error. So i did not include that part of the code.
var overlay = $(".ui-widget-overlay");
baseBackground = overlay.css("background");
baseOpacity = overlay.css("opacity");
overlay.css("background", "#000").css("opacity", "1");
function ShowOverlay() {
$("<div id='overlay'> <img src='Images/ajax.gif'/> </div>").appendTo('body');
$('#overlay').show();
Is it possible to add the image below _overlay.css("background", "#000").css("opacity", "1"); _ ?
I have images with dynamically generated image maps. I want users to be able to click on the map and be taken through to the <area href= property.
However, when they click on the background (i.e. not in any of the map's areas) I want them to go through to a background URL.
So my code looks something like this (fiddle):
<a href="fromAnchor.html" target="_blank">
<img src="image.png" usemap="#test" />
</a>
<map name="test" id="test">
<area href="fromMap.html">
</map>
In Chrome/FX it works as I expect - if I click in the area tag's shape I get taken to fromMap.html, if I click elsewhere I get directed to fromAnchor.html.
However, in IE (tested up to IE10) clicking on the img but outside the area does nothing. It does show the URL hint in the bottom left corner, but it doesn't follow the a tag.
Is there a way around this?
I came up with a solution, but it's kind of awful (so would be very happy to see a better answer).
My workaround is to dynamically add a fallback <area> that fills the entire image and let clicks outside the exiting area's fall back to it:
var msie = /MSIE/.test(navigator.userAgent);
if (msie)
{
// Don't do this hack twice
$('map[data-iehack!="1"]').each(function ()
{
// First find the image this map applies to
var $this = $(this);
var name = $this.attr('name');
var $img = $('img[usemap="#' + name + '"]');
// Then find if the image is in an <a> tag
var $link = $img.parents('a');
if ($link.length > 0)
{
// If there is an <a> add an extra <area> that fills the image
var wrapLink = $link[0].href;
var width = $img.width();
var height = $img.height();
var $fallbackArea = $('<area shape="rect" coords="0,0,' + width + ',' + height + '" />');
$fallbackArea.attr('href', wrapLink);
$this.append($fallbackArea);
}
// Flag this map so we don't add it again
$this.attr('data-iehack', '1');
});
}
This example is in jQuery but the principal should work in other frameworks.
There has to be a better way than this - and this hack has to check the browser as I can't figure out how to detect IE's failure here.
Is it possible to include a sort of transparent box with an Image Map? People would hover their mouse over it to display a box that could have content inside?
I thought of this earlier but wasn't sure how to do it.
I would say it is most definitely possible. I would probably try using some jQuery to get which map element is being hovered and then displaying some sort of span.
You may also be able to set an id to the specific areas and on hover set background to whatever you want. (Haven't tried this, but just a thought)
Here is a simple example. This highlights a box, so just edit the CSS to hide/show/position it. I've used the HTML5 "data-" element to store data that is used to identify the corresponding element in the event handler.
<img width="400" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/World-map.png/800px-World-map.png" usemap="#demo" border="0">
<map id="map1" name="demo">
<area shape="rect" coords="0,0,100,100" href="#" data-element="a" />
</map>
<div id="a">Info goes here</div>
CSS:
.active {
border:2px solid #ff0000
}
JS:
$('#map1 area').on('mouseover',function() {
var target = $(this).data('element');
$("#" + target).addClass('active');
})
$('#map1 area').on('mouseout',function() {
var target = $(this).data('element');
$("#" + target).removeClass('active');
})
I'd like to have a specific image display, and allow users to click on it and the image changes, kind of like a mouseover effect. However, I want it to show a random image from a set list. It'd happen once per page refresh, and be done. I'd prefer it not be reversible.
What I'm using it for is a random card draw with images. I start with the back of the card, and have many possibilities to show up when clicked.
Thanks!
Here is the basic code you would need as far as I understand
<img src="img/BackOfCard.jpg" onClick="Randomize(this)" />
<input type="hidden" value="1" id="onlyOnce">
<script type="text/javascript" language="javascript">
function Randomize(obj) {
onlyOnce = document.getElementById("onlyOnce");
if (onlyOnce.value=="1") {
var n = Math.round((100*Math.random())+0.5);
var urls = ["url1.png","url2.png","and so on"];
obj.src = urls[n];
onlyOnce.value="0";
}
}
</script>
This assumes that you have a folder called "img" with the back of card image and all the card faces stored there. The card faces will be stored in the format Ace = 1.jpg, 2 = 2.jpg, 3 = 3.jpg, King = 13.jpg and so on.
I have a website which contains the cute conceit of a random headshot. Every time you load the page (or click the headshot), it gets replaced with a new headshot. It works great until I post a link to the website on Facebook.
What happens then is when Facebook scans the page for images, it doesn't find the random image, I assume because it doesn't run the scripts. I would love for the facebook thumbnail to also have a random image.
Is there any way to solve this without resorting to server side code?
Here's what I do now:
in head-script section
var lastTimeout = 0;
var lastHeadNum = 0;
function headURL(headCount)
{
url = "/public/images/heads/mtoy";
if( headCount < 10 )
url += "0";
url += headCount.toString();
url += ".gif";
return url;
}
function headshotImage()
{
lastHeadNum = Math.floor((Math.random()*87)+1);
document.write('<img id="headshot" src="' + headURL(lastHeadNum) + '" onclick="next_headshot();" width=150 height=150>\n');
lastTimeout = setTimeout("next_headshot();", 12000);
}
function next_headshot()
{
if (lastTimeout != 0)
clearTimeout(lastTimeout);
do {
headNum = Math.floor((Math.random()*87)+1);
} while (headNum == lastHeadNum);
lastHeadNum = headNum;
document.getElementById('headshot').src = headURL(headNum);;
lastTimeout = setTimeout("next_headshot();", 12000);
}
then later in the body-html
<div id="contents">
<script type="text/javascript">headshotImage();</script>
<H1 class="contenthead">Table of Contents</H1>
in a previous incarnation, the body-html looked like:
<div id="contents">
<img id="headshot" src="" onclick="next_headshot();">
<H1 class="contenthead">Table of Contents</H1>
and then i had a body.onload handler to call next_headshot the first time, and that had the same problem with Facebook.
If you really want Facebook to have a random image, then I think you need server-side code. But if you're happy with a fixed image, then look into OpenGraph. You should be able to put this in your <head> section:
<meta property="og:image" content="/public/images/heads/mtoy01.gif"/>
Another approach is to put the <img> tag right into the HTML (instead of generating it procedurally) and hard-code it to one image. It won't give you the initially-random image, though you could probably swap it out immediately on page load.