I am trying to pass variable along with link. In first page (test.php) I have variable $x that passes to second page (menu.php).
When I send it by normal link, variable got passed to the second page without an issue. But when same was passed with the link defined within map area tags, only the first instance of the variable got passed always. (Always print 0)
Could somebody help me?
test.php
<?php
for ($x = 0; $x <= 5; $x++) {
?>
<p>
<img src="uploads\network.png" width="1261" height="961" usemap="#planetmap">
<?php echo $x ; ?>
<map name="planetmap">
<area shape="rect" coords="91,31,211,151" alt="Sun" href="menu.php?projectid=<?php echo $x;?>" target="_blank">
</map>
</p>
link
<?php
}
?>
menu.php
<?php
$cell = $_GET["projectid"];
echo $cell;
?>
Actual HTML (View source)
<img src="uploads\network.png" width="1261" height="961" usemap="#planetmap">
0<map name="planetmap">
<area shape="rect" coords="91,31,211,151" alt="Sun" href="menu.php?projectid=0" target="_blank">
</map>
</p>
link
<img src="uploads\network.png" width="1261" height="961" usemap="#planetmap">
1<map name="planetmap">
<area shape="rect" coords="91,31,211,151" alt="Sun" href="menu.php?projectid=1" target="_blank">
</map>
</p>
link
<img src="uploads\network.png" width="1261" height="961" usemap="#planetmap">
2<map name="planetmap">
<area shape="rect" coords="91,31,211,151" alt="Sun" href="menu.php?projectid=2" target="_blank">
</map>
</p>
link
you will just want to have the in the file you are linking too$projectid = $_GET['projectid'];
Related
I want to show status with 0 area as red dot and status with 1 area are green. I used style tag for area. But not color coming on image area. Anybody knows please help me. I am sharing my code below
<html>
<map name="map1" id="_map1">
<?php
foreach ($points as $point)
{
$name=$point->name;
$status=$point->status;
if($status==1){ ?>
<area shape="rect" coords="10,15,18,20" href="<?php echo base_url()?>assets/images/green.jpg" alt="" title="" onmouseover="<?php echo $name; ?>" />
<?php
}
else if($status==0) {?>
<area shape="rect" coords="0,0,50,50" href="<?php echo base_url()?>assets/images/red.jpg" alt="" title="" onmouseover="<?php echo $name; ?>"/>
<?php
}
} ?>
</map>
<img id="map1" src="<?php echo base_url()?>assets/images/rectangle.png" usemap="#map1" border="0" width="800" height="600" alt="" />
</html>
See the example use of <map> Html map tag
The href attribute does not show the image (red or green). It is a hyperlink to the target image. The image displays on the screen is the src file of the <img> tag.
You may need to generate the image dynamically on the server side, or use <canvas> to render the data on the client side.
For Facebook and for Google i found this solution..
<script type="text/javascript">
$(document).ajaxComplete(function(){
try{
FB.XFBML.parse();
gapi.plusone.go();
}catch(ex){}
});
</script>
but not for tumblr. Does anybody know if there is any solution?
Tubmlr-post-button is implemented like this:
<a class="tumblr-share-button" data-href="http://www.xy.ch/news_entries/<? php echo "{$row['title']}.html" ?>" data-content="http://www.xy.ch/news_entries/<?php echo "{$row['title']}.html" ?>" data-color="blue" data-notes="right" href="https://embed.tumblr.com/share"></a>
Thanks
M
I had to find another solution (because i have another use case) and worked out this:
<img src='http://www.mywebsite.com/share_list.png' data-pin-no-hover="true" class="share_buttons_img" usemap='#share_buttons' />
<map name='share_buttons'>
<area shape='circle' coords='78,21,13,80' href="#" title="Share on Facebook" onclick="popUp=window.open('https://www.facebook.com/sharer/sharer.php?u=www.mywebsite.com/news/<?php echo "{$row['image_title']}.html" ?>','popupwindow', 'scrollbars=yes,width=500,height=400');popUp.focus();return false;" >
<area shape='circle' coords='116,21,13,80' href="#" title="Share on Tumblr" onclick="popUp=window.open('http://tumblr.com/widgets/share/tool?canonicalUrl=http://www.mywebsite.com/news/<?php echo "{$row['image_title']}.html" ?>','popupwindow', 'scrollbars=yes,width=500,height=400');popUp.focus();return false;" >
<area shape='circle' coords='153,21,13,80' href="#" title="Share on Google+" onclick="popUp=window.open('https://plus.google.com/share?url=www.mywebsite.com/news/<?php echo "{$row['image_title']}.html" ?>','popupwindow', 'scrollbars=yes,width=500,height=400');popUp.focus();return false;" >
</map>
The name of the column is : link. variable-type:varchar.
<img src="<?php echo$link;?>" style="width:300px; height:400px;" />
</html>
Your echo command could be missing an ";"
$link=$row['link'];
<img src="<?php echo $link; ?>" style="width:300px; height:400px;" />
Should work better.
I'm trying to put an anchor in the top-right of an image.
This is my view:
<div class="table">
<tr>
<?php foreach ($q as $row)
{
$var = $row->path;
$info = pathinfo($var);
echo '<td><a href="#" style= "position:relative">
<img src="'.base_url().'images/thumbs/'.$info['basename'].'"/>
</a>'.anchor('gallery/remove_photo/'.$row->id,'<i class="icon-remove"></i>','class="close"').'</td>';
}?>
</tr>
</div>
I've tried by set the position relative and the postion of the anchor absolute but it now works. I forgot to say that i'm using bootstrap 3
Why not just use an image map?
http://www.w3schools.com/tags/tag_map.asp
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
There are even some decent online tools to find the coordinates if needed like this one.
http://www.image-maps.com/
To position something absolutely (which is what you want to do), it has to have container that also has positioning set to position itself against. Sounds complex, but it's not really.
If you set your container to position:relative (meaning keep it in the flow of the document where it would normally be), then you can set descendant elements to position: absolute.
So, in your case, if you wrap your image and button in a div and set the div to position: relative, you can set the button to position: absolute like this:
<div style="position: relative;">
<img src="yourimagename.jpg" alt="">
<button style="position: absolute; top: 0; right: 0; z-index: 1;">×</button>
</div
I've encountered this issue a couple times but have always found a "hack" way around it. Is there a special way to link an image in a WordPress template to an outside url beyond the typical a href tag? Here's the images I'm trying to link to outside urls:
<div class="socialMedia">
Follow Us: <br />
<img src="<?php echo get_bloginfo('template_url') ?>/images/facebook.png" alt="facebook"/>
<img src="<?php echo get_bloginfo('template_url') ?>/images/twitter.png" alt="twitter"/>
<img src="<?php echo get_bloginfo('template_url') ?>/images/googleplus.png" alt="google plus"/>
<img src="<?php echo get_bloginfo('template_url') ?>/images/instagram.png" alt="instagram"/>
</div><!--.socialMedia-->
<div class="socialMedia">
Follow Us: <br />
<a href="<?php echo get_bloginfo('template_url') ?>/images/facebook.png" target="_blank" > <img src="<?php echo get_bloginfo('template_url') ?>/images/facebook.png" alt="facebook"/> </a>
</div><!--.socialMedia-->
did you mean it!!?