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>
Related
<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 />
I stuck with some strange behaviour in vue.
The result
The code
<template>
<div class="container">
<main class="messages">
<message v-for="message in messages" v-bind="message" :key="message.id" />
</main>
<div class="send-message">
<g-input v-model="message" :maxLength="80" #submit="sendMessage">
<object type="image/svg+xml" data="assets/send-icon.svg" width="200" height="200">
<img src="assets/send-icon.png" width="200" height="200" alt="image format png" />
</object>
</g-input>
</div>
</div>
</template>
g-input code
<template>
<div class="root">
<canvas ref="canvas" class="hide"></canvas>
<textarea
ref="input"
class="input"
type="text"
:rows="lineCount"
:maxlength="maxLength"
:value="value"
#input="handleInput"
#keydown.prevent.enter="handleEnter"
/>
<div ref="confirmButton" class="confirm-button">
<slot></slot>
</div>
<span class="char-counter">{{ `${charCount}/${maxLength}` }}</span>
</div>
</template>
I absolutely do not understand why this happens, can you please explain?
So I found how to avoid this
Just need to replace data attribute in object like this
<object type="image/svg+xml" :data="sendIcon" width="200" height="200">
<img src="#/assets/send-icon.png" width="200" height="200" alt="image format png" />
</object>
Then in script tag we need to export icon
const sendIcon = require('#/assets/send-icon.svg')
export default {
data: () => ({
sendIcon: sendIcon,
}),
}
But I still do not understand wht this is happens cause single <img> tag works just fine
<img src="#/assets/send-icon.svg" width="200" height="200" alt="image format png" />
And only <object> tag produce this behaviour and only with local url, some http url works fine
<object
type="image/svg+xml"
data="https://upload.wikimedia.org/wikipedia/commons/1/12/Black_Paw.svg"
width="200"
height="200">
<img
src="https://upload.wikimedia.org/wikipedia/commons/1/12/Black_Paw.svg"
width="200"
height="200"
alt="image format png"
/>
</object>
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/
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
I use below marquee in my webpage,
<MARQUEE WIDTH=100% DIRECTION=LEFT BEHAVIOR=SCROLL Loop=auto BGColor=White onmouseover="this.stop()" onmouseout="this.start()" >
<img src="/images/berkadia.png" border="0" alt="barkedia" width="200" >
<img src="/images/hcl.png" border="0" alt="HCL" width="200">
<img src="/images/hcl-axon.png" border="0" alt="HCL-Axon" width="200">
<img src="/images/hexaware.png" border="0" alt="Hexaware" width="200">
<img src="/images/lebera.png" border="0" alt="Lebera" width="200">
<img src="/images/polaris.png" border="0" alt="Polaris" width="200">
<img src="/images/wipro.png" border="0" alt="Wipro" width="200">
</MARQUEE>
but this marquee not properly working in IE8 alone?. It marquee images but struck.
How can i Fix that?.
There is no character in your marquee inner html. You have only images.
Write " " before every image tag