I want to display an image in an iframe when I click that image inside that table. Problem is, the image that gets displayed inside the iframe is too small (too large images are not a problem for now). So I attempted to pass the image in a javascript function when it is clicked and perform the necessary resizes, but here I get another problem in setting the image object as the src of the iFrame. Any suggestions? Please guide me, I would save a lot of time if you can help.
Here is the javascript code I'm having problems with.
function resize(e){
var newImg = document.createElement('img');
newImg.src = document.getElementById(e).src;
newImg.width = '448';
newImg.height = '336';
document.getElementById('passTo').src = newImg.src; /*newImg doesn't work aswell*/
}
Here is my HTML code...
<tr>
<td colspan="2" height="336">
<iframe id = "passTo" name="A" src="Activity 6.html" style="width:100%; height:100%;" scrolling="no" marginheight="0" marginwidth="0">
<p>iframes are not supported by your browser.</p>
</iframe>
</td>
</tr>
<tr>
<td><img src = "index.jpg" id = "myimg" border="3" height="48" width="64" onclick="resize(myimg)"></img></td>
<td><img src = "index.jpg" id = "myimg2" border="3" height="48" width="64" onclick="resize(myimg2)"></img></td>
</tr>
I would suggest just setting the innerHTML of the iframe body:
function resize(e){
var imgURL = document.getElementById(e).src;
var iframe = document.getElementById('passTo');
var html = "<img width='448' height='336' src=" + imgURL + ">";
var doc = iframe.contentDocument || iframe.contentWindow.document;
doc.body.innerHTML = html;
}
Or, if you wanted to create the img object yourself and insert it, you could do it like this:
function resize(e){
var imgURL = document.getElementById(e).src;
var iframe = document.getElementById('passTo');
// get iframe document in cross browser way
var doc = iframe.contentDocument || iframe.contentWindow.document;
// create img object in the iframe's document.
var img = doc.createElement("img");
img.height = 336;
img.width = 448;
img.src = imgURL;
doc.body.appendChild(img);
}
There were several issues with what you were previously trying:
You were settings the iframe.src to an image URL. When doing that, you have no control over the height and width of the img object that the iframe creates and it has nothing to do with the other img object you had created.
You can't create an img object in one document and then use it in another document.
The easiest way to put some HTML in another document is be just setting HTML on it and letting the browser create the objects in the right document.
Also, keep in mind that you can only modify or read the DOM contents of an iframe if it's in the same domain as the window/frame your code is running in (which is OK in your example).
Related
I'm using the code below to amend an image url (basically adding 'admin' to the start of the URL inside 'news' div. This works fine for what I'm trying to do, but it's causing some other problems, like blocking embedded Tweets and blocking some adverts from showing that are placed inside the 'news' div.
Is there a better way to achieve what I want that won't impact other code as I can't for the life of me understand why it's causing issues with other code, but removing the below fixes the issue with the tweets and ads?
function replaceText(){
var theDiv = document.getElementById("news");
var theText = theDiv .innerHTML;
theText = theText.replace(/ckfinder/g, 'admin/ckfinder');
theDiv.innerHTML = theText;
}
This is the image path I'm amending:
<img height="267" src="/ckfinder/userfiles/images/XXX/XXX.jpg" width="400" />
But need it to be:
<img height="267" src="admin/ckfinder/userfiles/images/XXX/XXX.jpg" width="400" />
You should be more specific and target the img tag and update the src attribute directly.
function replaceText() {
var images = document.querySelectorAll(".news img");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.src = img.src.replace(/ckfinder/g, 'admin/ckfinder');
}
}
window.onload = replaceText;
<div id="news">
<p>Don't want to update this ckfinder</p>
<img height="267" src="/ckfinder/userfiles/images/XXX/XXX.jpg" width="400" />
</div>
I have a question of document.getElementById().src under jQuery Template.
Firstly I created an array of 5 pictures(only the first element was depicted) as showed below:
var Image = function(src){
this.src = src;
}
var images = [];
images[0] = new Image("images/hedgehog.jpg");
Then I created a function which includes passing the src of the array to an ID(only relevant code was depicted):
document.getElementById("theQ").src = images[0].src;
The final part is the place expected to present the picture, but it didn't work:
<p style="text-align:center;" id="theQ"></p>
The navigation is correct as I could see the picture when I hover on the URL in text editor. Thank you for the help!
A paragraph is not an image. You can't attach a source to it. And it makes no sense to shadow the image constructor, just use the native one:
const img = new Image();
img.src = "images/hedgehog.jpg";
Now you can easily append that image to the dom:
document.getElementById("theQ").appendChild(img);
Since you already use jQuery in your template.
var Image = function(src){
this.src = src;
}
var images = [];
images[0] = new Image("https://thumbs.dreamstime.com/b/woman-wearing-yellow-floral-top-116695890.jpg");
$("#theQ").append("<img src=\""+images[0].src+"\" width=\"150\" />");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="text-align:center;" id="theQ"></p>
I'm inserting an iframe using javascript in the following way:
var s ="<p><iframe name="searchf" src="http://www.google.com" frameborder="0" width="100%" height="350"></iframe></p>";
var para = document.createElement("div");
para.innerHTML = s;
var element = document.getElementById("some_div_id");
var child = document.getElementById("some_fieldset_id");
element.insertBefore(para,child);
Let's say the parent window domain is http://www.parentwindowdomain.com/example1. The problem is that the iframe src page is somehow interpreted in such a way that the parent window domain name is prepended to the specified src domain. For example, the resulting iframe src page address would turn out to erroneously be http://www.parentwindowdomain.com/example1/"http://www.google.com"
Is there a way to override this so that, in this case, the iframe src page would be http://www.google.com ?
Can you try this one, i think it is tidier.
http://jsfiddle.net/qpkp5sb2/
var s = document.createElement("iframe");
s.setAttribute("name", "searchf");
s.setAttribute("src", "http://www.example.com");
s.setAttribute("frameborder", "0");
s.setAttribute("width", "100%");
s.setAttribute("height", "350");
var pp = document.createElement("p");
pp.appendChild(s);
var para = document.createElement("div");
para.appendChild(pp);
var element = document.getElementById("some_div_id");
var child = document.getElementById("some_fieldset_id");
element.insertBefore(para,child);
console.log(s);
I am a complete nub with JS, but I fiddle with it occasionally when necessary. I am writing a function that changes two images on a page (before & after gallery images) when a sliding image is click / selected from a marquee below them. I have that working. The problem is that I also need to change the AFTER image when the BEFORE image is moused over, and I dont seem to be able to pass that variable to the function correctly - here is what I have:
<script>
function changeImage(imgName)
{
var img = imgName;
img += 'a.jpg';
var img1 = imgName;
img1 += 'b.jpg';
image = document.getElementById('imgDisp');
image.src = img;
image = document.getElementById('imgDisp1');
image.src = img1;
}
function swap1(image)
{
var img = 'newgallery/';
img += image;
img += 'b.jpg';
image = document.getElementById('imgDisp');
image.src = img;
}
function swap2(image)
{
var img = 'newgallery/';
img += image;
img += 'a.jpg';
image = document.getElementById('imgDisp');
image.src = img;
}
</script>
<table border=0 width=85%>
<tr>
<td align=center valign=top>
<img id="imgDisp1" src=newgallery/1b.jpg height=80
onmouseover="swap1(img)"
onmouseout="swap2(img)"
>
<p class=content>BEFORE</b></p></td>
<td width=35></td>
<td align=center><img id="imgDisp" src=newgallery/1a.jpg width=550></td>
</tr>
</table>
<marquee behavior="scroll" direction="left" scrollamount="3" onMouseOver="this.stop();" onMouseOut="this.start();">
<?php
$imagenum = '1';
$imageset = 'a.jpg';
$imagesetalt = 'b.jpg';
while($imagenum < 37){
$imagename = "$imagenum$imageset";
$imagethumb = "$imagenum$imagesetalt";
if($imagenum == '13'){
}else{
echo"
<img src=\"newgallery/$imagename\" height=\"120\" border=0 onclick=\"changeImage('newgallery/$imagenum')\">
<img src=images/spacer.gif width=25 height=1>";
}
$imagenum++;
}
?>
I can change the images on click in the marquee calling the changeImage function because I can pass the assigned image name variable to the function. I cannot seem to figure out how to pass the BEFORE thumbnail image name variable to the mouseover functions (swap1) & (swap2) respectively. This may just be a simple syntax solution - but again I dont know JS well enough to figure it out - any assistance would be appreciated.
Honestly, your code is a little overcomplicated. You can simplify this by taking advantage of the data attribute of HTML elements.
Lets say you have a container defined as
<div id = 'img_container' class = 'some_class'>
<img id = 'image' class = 'some_image_class' src = '/path/to/default/image.jpg'
data-alt = '/path/to/hover/image.jpg' />
</div>
You can define a function to retrieve the path stored in the data attribute and swap the data and source values via
function swap(image){
//temporary variable to hold the alternate image path
var newImage = image.data("alt");
//store the image src attribute in the `data-alt` attribute
image.data("alt", image.attr("src");
//replace the image src attribute with the new image path
image.attr("src", newImage);
}
Now, you can apply events to the image via
$("#image").on("mouseover", function(e){
swap($(e.currentTarget));
})
.on("mouseout", function(e){
swap($(e.currentTarget));
});
This will allow you to replace the onmouseover and onmouseout events in your HTML.
I have a table and I would like to change an image in its <td> when I click it but it must be URL of image that I determine before.
That URL of image I type to the link of the page(for example by click on img)
index.html?type=dog
Then the script will read variables from link. I will create variable to the script.
type = httpGetVars["type"]
Now when I click on where is img of cat, the script should replace cat.png for dog.png and I tried it in this way.
<img src="cat.png" onClick="document.write("<img src=\""+ type + ".png\">);
<img id="foo" src="cat.png />
Give that <img> an id - foo for example than:
document.getElementById('foo').src = type +".png";
You simply change the existing <img> src to the new image.
You can define the img like the following:
<img src="some_image_url.extension" onclick="switchImage(this)" />
and then on the switchImage function you can check the current image and change to a different image:
var switchImage = function(image) {
if(image.src == dogImage) {
image.src = catImage;
} else {
image.src = dogImage;
}
};
I've made a Sample Fiddle so you can see it running.