JavaScript "<SCRIPT>" in Image src attribute - javascript

So I have the following JavaScript function.
var LogoUrl = function() {
document.write('views/img/common/site-logo.svg');
}
And I want to have this function used in a html img src attribute.
Here is a example though this syntax wouldn't work, it should give you an idea of what I am looking for.
<img class="site-logo" src="<script> LogoUrl() </script>" alt="Site Logo">
And hoping this would export the following in the browser
<img class="site-logo" src="views/img/common/site-logo.svg" alt="Site Logo">
What is the best approach to doing this?

You can do this with the following instead:
<script>
document.write('<img class="site-logo" src="' + 'views/img/common/site-logo.svg' + '" alt="Site Logo">');
</script>
Since the script tag is indeed a tag, you can't put it inside the attributes of another tag.
A much better approach however would be the following:
Prepare a span element for the element to appear in, and give it a specific id. This would be your HTML:
This is my image: <span id="myImg"></span>.
and this will be your jQuery code:
$(function() {
$('<img>').class('site-logo')
.attr('src', 'views/img/common/site-logo.svg')
.attr('alt', 'Site Logo')
.appendTo('#myImg');
});
Alternatively, instead of preparing a span, you could prepare the image without defining a src attribute, with the following HTML:
This is my image: <img id="myImg" class="site-logo" alt="Site Logo">.
and the following jQuery code:
$(function() {
$('#myImg').attr('src', 'views/img/common/site-logo.svg');
});

You can use jquery $(document).ready() to set the image src.
$(document).ready(function (){
$('img.site-logo').attr('src', 'views/img/common/site-logo.svg');
});

You could do this - but this makes it obstructive.
<script>document.write("<img class=\"site-logo\" src=\"views/img/common/site-logo.svg\" alt=\"Site Logo\">")</script>
It is also not very organised because it ties everything so much with the markup that you might as well just have it as markup.
You're better off doing it properly by changing the src property
var logo = document.getElementsByClassName('site-logo')[0];
logo.src = 'http://www.develop.com/Images/v3/tech-symbols/angularjs_logo.png';
demo here http://jsfiddle.net/andyw_/XxTuA/268/
If this is all you need to do - I don't think it justifies the use of a selector library or front-end framework.

Related

How I can create a button for save a image with Javascript or any Javascript framework?

I would like save with a button a generated picture. I see the fastest solution is JavaScript, probably JQuery or any framework.
My application generate a img label, for example:
<img src = "data:image/png;base64,iVBORw0KGgo...(it's very long)"/>
The many problem is the src attribute because change for my application, first I need catch the URL of this.
Thank you very much!
You can use the download attribute in HTML. If the img src is automatically generated, you could use the script below to put it in the href:
$('#save').prop('href', $('img').prop('src'));
<img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png"/><br/>
<a id='save' download>Save</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

src tag using javascript in html

I am using HTML and JavaScript
var image="a.png";
<img src="+image+">
output is coming
<img src="+image+">
But expected output is
<img src="a.png">
Any idea how to achieve this
It is better to have some default img in your HTML body first for example:
<img id="my_id" src="default.png"/>
Then you can use jQuery or javascript directly to get the element by ID and set the src. For example in jquery you can do this:
$("#my_id").attr("src",image);
Or in plain javascript
document.getElementById("my_id").src = image;

Javascript get image source and inject into another image source

I've been working on a Javascript photo gallery and I want it to be very user-friendly. This involves only having to use one image and one link per image. I have it so all the images appear in a scrolling div on the left and onClick it is suppose to change the image source on the right but I can't seem to get javascript to get the image source from the original image and change the second one with it. I've tried a few other ways but this is the way I like and if I could get it to work it would be perfect.
This is inside a table so it is align differently I'm just giving the code needed.
This code was given below but it seems as though he deleted his answer. I think you were much close than me!
Javascript:
<script type="Text/javscript">
function setImage(this) {
document.getElementById("ImageFrame").src = this.childNodes[0].src;
}
</script>
break
<div style="width:275;height:400;overflow-x:scroll;">
<img class="gallery" src="JCF/PICT0421.jpg" />
<img class="gallery" src="JCF/PICT0422.jpg" />
<img class="gallery" src="JCF/PICT0423.jpg" />
</div>
The image being changed.
<div>
<img id="ImageFrame" src="JCF/PICT0421.jpg" width="400" />
</div>
here is a working example. NOTE: a.getElementsByTagName('img')[0].src as different browsers would add nodes to tag before and after the child tag. It is safe to use getElementsByTagName('img')[0].src
<html>
<head>
<script type="text/javascript">
function setImg(a){
//alert(a.getElementsByTagName('img')[0].src);
document.getElementById('ImageFrame').src =
a.getElementsByTagName('img')[0].src
}
</script>
</head>
<body>
<img src="JCF/PICT0421.jpg">
<div>
<img id="ImageFrame" src="JCF/PICT0421.jpg" width="400" />
</div>
</body>
</html>
var pic1 = document.getElementById("image1");
var src = pic1.src; // here is the src for image1
var pic2 = document.getElementById("image2");
pic1.src = src; // here we set the src for image2
So this code will take the image src from image1 and put it in image2.
I believe something like this should work for you:
HTML:
<img class="gallery" id="image1" src="image1.jpg" />
Javascript:
function setImage(imgParent) {
document.getElementById("ImageFrame").src = imgParent.childNodes[0].src;
}​
Live DEMO
The Demo will work better when you actually load in images. However, if you inspect the broken images, you can see that it is loading in the new image correctly.
Edit:
Since Kaf mentioned that he has had issues with childNodes, you may want to try this out instead:
Javascript:
function setImage(imgParent) {
document.getElementById("ImageFrame").src = imgParent.getElementsByTagName('img')[0].src;
}​
assuming you can use Jquery
$('.imageClass').click(function(){
var srcToCopy = $(this).attr('src');
$(somewheretoputsrc).attr('src', srcToCopy);
})
this code should work
edit : fiddle edited with working image
http://jsfiddle.net/jbduzan/b7adx/1/
You should go with so called "Unobtrusive JavaScript", i.e. don't mix content with JavaScript and apply the desired behaviors after the window has been loaded.
Something like that:
function addDomListener(element, eventName, listener) {
if (element.addEventListener) // most browsers
element.addEventListener(eventName, listener, true);
else if (element.attachEvent) // IE
element.attachEvent('on' + eventName, listener);
}
window.onload = function() {
var elements = getElementsByClassName('thumb-link');
for (int i=0; i < elements.size(); i++) {
var el = elements[i];
addDomListener(el, "click", function () {
setImage(el);
});
}
}
getElementsByClassName still needs an implementation here and every a tag that had onlick previously needs the class 'thumb-link'. But I'm sure you'll figure that out.
Using a library like jQuery or Prototype.js would make it easier here...

How do I write the following as a regular expression to replace multiple occurances?

Background:
I have string of html with about 10 image tags that passes through some JavaScript as a string at runtime before being injected into a containing element. The data-thumb tag of each image is slightly incorrect and needs to be altered before making it into the DOM. Here is an example:
<img src="foo_lg_db.jpg" data-large="foo_lg_db.jpg" />
<img src="bar_lg_db.jpg" data-large="bar_lg_db.jpg" />
<img src="fizz_lg_db.jpg" data-large="fizz_lg_db.jpg" />
Needs to become:
<img src="foo_tn_db.jpg" data-large="foo_lg_db.jpg" />
<img src="bar_tn_db.jpg" data-large="bar_lg_db.jpg" />
<img src="fizz_tn_db.jpg" data-large="fizz_lg_db.jpg" />
Question:
In JavaScript (jQuery is OK), how do I achieve this search and replace?
THE ANSWER:
Thanks to Mark's answer I learned that it is possible to instantiate a jQuery object before it hits the DOM so, rather than using regex, I did something like this:
var stringHtml = "<img . . .";
var div = $("<div>").html(stringHtml );
$.each(div.find('img[src]'), function () {
$(this).attr('src', $(this).attr('src').replace('_lg', ''));
});
return div.html();
$('img[data-thumb]').each(function() {
$(this).attr('data-thumb', $(this).attr('data-thumb').replace('_lg_','_tn_'));
});
Something like that in jQuery.
Sounds like a problem you should be fixing server-side if possible though.
If you give jQuery an HTML element like $('<div>') it will essentially create the HTML element for you and then you can manipulate it before inserting it into your DOM. I don't know if it will handle multiple elements, but you can create a container first (like above) and then set the content like so
$('<div>').html(yourHtml).find('img[data-thumb'])./* code above */

JS/jQuery: How can I automatically wrap <a href> tags around <img />s with the href being dynamic based on the img src?

Heads up: I am quite new to Javascript and have so far only written very basic scripts based on jQuery.
I am a quick study though..
What I am after is a way to:
1) identify tags
2) read the img tags
3) wrap the tag with an <a href> tag with a dynamic link based on the src of the img.
Example:
<img src="../../img_T/Culture/C_01/c_01_abb_005.jpg" width="310" height="180" alt="image1">
should become
<img src="../../img_T/Culture/C_01/c_01_abb_005.jpg" width="310" height="180" alt="C 01 Abb 005">
I am thinking that reading the src of each image and writing it to a variable, then reading that variable and replacing the /img_T/ with /img_L/ and then writing that to a new variable which can then be simply added to each href.
This is how far I have gotten, but this does not work at all:
/* in the comments 'xxx' represents a different unique image string */
/* This should get the <img src="../img_T/xxx" /> string as text and store it. */
var $imgSrc = $(".displaywrapper img").attr("src");
/* This part should use the above sourced <img src="../img_T/xxx" string and replace ../img_T/ of the src with ../img_L/ and store it in var = imgLink. */
var imgLink = $imgSrc.text().replace("img_T","img_L");
/* This part should then wrap the <img src="../img_T/xxx" /> so it becomes <img src="../img_T/xxx" /> */
$(".displaywrapper img").each(function(){.wrap("")});
Thanks for reading.
Jannis
I think this should do the trick:
$(document).ready(function() {
$(".displayWrapper img").each(function() {
var src = $(this).attr('src').replace('img_T','img_L');
var a = $('<a/>').attr('href', src);
$(this).wrap(a);
});
});
Line 1: Wait for the document to be ready before doing anything..
Line 2: Loop through each image using jQuery's each function.
Line 3: Get the current image's src with attr and replace img_T with img_L
Line 4: Dynamically create a new <a> tag and set it's href attribute to the src in Line 3
Line 5: wrap the <a> tag around the <img> tag.
If you just need the images clickable, do this:
$(".displayWrapper img").click(function(){
document.location.href = this.src.replace("img_T", "img_L");
});

Categories