<a xlink:href="svg/agenda.jpg">
<rect id="agenda" class="cls-2" x="911.09" y="102.61" width="91.5" height="30"/>
</a>
The link need to be inserted using cordinates, because the page is basically a big image
thanks!
use below code to to display image.
<iframe frameborder="0" scrolling="no" width="100%" height="100%"
src="../svg/agenda.jpg" name="msg" id="msg">
<p>iframes are not supported by your browser.</p>
</iframe><br />
agenda image<br />
Related
How can i disable/Hide share option on embedded dailymotion?
Blockquote
https://www.dailymotion.com/embed/video/x5hywa
You can disable it via the query string in the URL in the iframe.
--> "sharing-enable=false"
For instance:
<iframe frameborder="0" width="480" height="270"
src="//www.dailymotion.com/embed/video/x5hywa?sharing-enable=false"
allowfullscreen allow="autoplay"></iframe>
Just put that video in an iFrame and you're fine. There's no overlay.
<iframe src="https://www.dailymotion.com/embed/video/x5hywa" style="border:0px #ffffff none;" name="iFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="400px" width="600px" allowfullscreen></iframe>
Example: http://jsfiddle.net/ysxf4qt3/
Currently I'm using SVG for some animation and I want that when someone clicks on an image with SVG around it that it will start a download for that image.
<div class="box">
<svg width="100%" height="100%">
....
</svg>
<img src="chief.png" alt="Chief"/>
</div>
How do I change it so it starts a download on click?
Test this
<a href="http://www.w3.org/Graphics/SVG/">
<svg class="Orange" ... >
<use xlink:href="buttonB.svg#Root"/>
</svg>
</a>
and check this page > http://tavmjong.free.fr/SVG/BUTTON_TEST/button_test.html
When the SVG is wrapped with the anchor, a click event on the SVG will be sent up to the anchor. In this case that will trigger the download.
<div class="box">
<a href="chief.png" download="chief.png">
<svg width="100%" height="100%">
....
</svg>
</a>
</div>
I have an iframe links within an html page as shown below:
<TABLE border="0" width="900">
<tr valign="top">
<td width="300" ALIGN=center>
<div class="item_list">
link
</div>
</td>
<td width="300" ALIGN=center>
<div class="item_list">
<iframe src = 'http://www.flipkart.com/affiliate/displayWidget?affrid=WRID-137232779171598318' frameborder = 0, height=250, width = 300 > </iframe></a><br>
</div>
</td>
<td width="300" ALIGN=center>
<div class="item_list">
<iframe src = 'http://www.flipkart.com/affiliate/displayWidget?affrid=WRID-137232785207215857' frameborder = 0, height=250, width = 300 > </iframe>
Now when i click within an iframe link , it open the link, but when i click back, it automatically redirect me to that iframe link. Can anyone suggest me what's the problem i'am having?
In your case I would implement my own controls for each iframe. Delegate this work to some buttons on your page instead:
<div id="view_iframe">
<iframe id="viewer" name="viewer" width="100%" height="600" src="some.html">
<p>Your browser does not support iframes.</p>
</iframe>
<input type="button" id="back" class="button" onClick="viewer.history.back();" value="<<" />
<input type="button" id="frwrd" class="button" onClick="viewer.history.forward();" value=">>" />
</div>
note - viewer is iframe id
note that both buttons, are positioned absolutely to align with iframe on page resize.
anyway, here are what the iframe controls for this:
// For an iframe's window
iframe.contentWindow.history.back();
iframe.contentWindow.history.forward();
or
iframe.contentWindow.history.go(-1); // back
iframe.contentWindow.history.go(1); // forward
Can we make the following Google Map interactive provided the frame image is showing.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="button" onclick="$('#frame_image').show();" value="Show frame layer">
<input type="button" onclick="$('#frame_image').hide();" value="Hide frame layer">
<br /><br />
<div style="position: absolute; z-index: 1;">
<iframe frameborder="0" width="358" height="358" marginheight="0" marginwidth="0" scrolling="no" src="https://maps.google.ca/maps?f=q&source=s_q&hl=en&geocode=&q=55+Avenue+Road,++Toronto,+Ontario+M5R+3L2+Canada&aq=&sll=43.656877,-79.32085&sspn=0.852471,2.113495&ie=UTF8&hq=&hnear=55+Avenue+Rd,+Toronto,+Ontario+M5R+1C6&t=m&z=14&ll=43.67111,-79.395217&output=embed&iwloc=near" ></iframe> <br />
<small>View Larger Map</small>
</div>
<div style="position: absolute; color:red; z-index: 2" id="frame_image">
<img src="http://torontoclinic.awkwardhosting.com/images/frame.gif" />
</div>
Code is also on the following link:
http://jsfiddle.net/pPrZV/
Please let me know if there is any other way via Google Maps API etc.
Thanks
Just apply this style to <iframe> of the google map
<iframe style="border-radius:250px" frameborder="0" width="358" height="358" marginheight="0" marginwidth="0" scrolling="no"...
Working jsFiddle here
here is my code snippet
<img src="images/home.jpg" height="40" width="150" />
<img src="images/contact.jpg" height="40" width="150" />
and
<iframe src="aboutseels.php" scrolling="auto" width="100%" height="360" ></iframe>
now, i was wondering if there is a way that when the client clicks one of the images, the src of the iframe will change??
for example if i click on the second image the src of the iframe will be src="contactus.php"
I think you set a name attribute on the iframe and wrap the images in an a tag with the target attribute to be the same name.
<iframe name="foo" ...></iframe>
...
you could use the javascript library jQuery and then use the click event to capture clicks on the images it could look something like this
$(function(){
$('img').click(function(){
iframeSrc = this.attr('title');
$('iframe').attr('src',iframeSrc);
});
});
and the html could look like this then
<img src="images/home.jpg" height="40" width="150" title="http://google.com" />
<img src="images/contact.jpg" height="40" width="150" title="http://facebook.com"/>
<iframe src="aboutseels.php" id="iframe" scrolling="auto" width="100%" height="360" ></iframe>
Or use regular html and use target
<a target="iframe" href="http://facebook.com"><img src="images/home.jpg" height="40" width="150" title="http://google.com" /></a>
<a target="iframe" href="http://google.com"><img src="images/contact.jpg" height="40" width="150" title="http://facebook.com"/></a>
<iframe src="aboutseels.php" id="iframe" scrolling="auto" width="100%" height="360" ></iframe>