I am using this code and my file name is ads.js
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*?)[#.]/gi, function(m, key, value) {
vars[key] = value;
});
return vars;
}
var pic = getUrlVars()["pic"];
var random_ads_array = ["visitors.jpg", "payouts.jpg", "logos-icon.jpg"];
function getRandomAds(imgAr, path) {
path = path || 'buycimg/'; // default path here
var num = Math.floor(Math.random() * imgAr.length);
var img = imgAr[num];
var imgStr = '<img src="' + path + img + '" alt = "">';
document.write(imgStr);
document.close();
}
And in html part I am using this code
<script type="text/javascript" src="ads.js?pic=45bus67"></script>
<script type="text/javascript">getRandomAds(random_ads_array);</script>
Out put is showing an image but not showing the correct link
Output is like this
http://appricart.com/undefined.html
I want to show
http://appricart.com/45bus67.html
Help related this thankx
Why don't you just put the pic value into the function?
<script type="text/javascript" src="ads.js"></script>
<script type="text/javascript">getRandomAds(random_ads_array, "45bus67");</script>
ads.js
var random_ads_array = ["visitors.jpg", "payouts.jpg", "logos-icon.jpg"];
function getRandomAds(imgAr, pic, path) {
path = path || 'buycimg/'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var imgStr = '<img src="' + path + img + '" alt = "">';
document.write(imgStr); document.close();
}
Perhaps you could give it an ID - and then:
src = document.getElementById("scriptId").getAttribute("src");
src = src.split("?pic=");
src = src[1];
And voila! You can do what you need to do with src
Related
I need to wrap the < img > tag in < a > tag, for this it needes to get the address of the picture.
How to do this without using regexp?
And also i need to know width of the picture,
'onload' function breaks the event 'BeforeSetContent'
ed.on('BeforeSetContent', function (e) {
if (e.content.startsWith("<img")) {
var s = e.content.replace(/\<img src=\"(.+)\" alt.+\>/i,'$1');
console.log('SRC: '+s);
// var img = new Image();
// img.src = s;
// img.onload = function() {
// console.log('img-width: '+img.width);
// if (img.width > 450){
e.content = '<a class="ajax-modal modal_image hover_image" href="' + s + '">' + e.content + '</a>';
// }
// }
}
});
if you want open new window when clicking img, you can do this:
document.addEventListener('click', function(event) {
if (event.target.nodeName === 'IMG' && event.target.src && /^http/.test(event.target.src)) {
event.preventDefault()
window.open(event.target.src)
}
})
To answer the first question, if your image has an id then:
var imgsrc = document.getElementById("yourImageId").src;
If it does not have an id then use the parent e.g.:
var imgsrc = document.querySelectorAll('#imgParentDiv img')[0].src
i could get the address using jQuery
ed.on('BeforeSetContent', function (e) {
if (e.content.startsWith("<img ")) {
var objC = $(e.content).filter(':first');
var src = objC.attr('src');
e.content = '<a class="ajax-modal modal_image hover_image" href="' + src + '">' + e.content + '</a>';
}
});
how can i get the width of the picture using jQuery and my created object 'objC' ?
I can't make this open the image in a new window (not tab).
This script is placed in <head>:
<script type="text/javascript">
function randomImg1() {
var myImage1 = new Array();
myImage1[0] = "1.jpg";
myImage1[1] = "2.jpg";
myImage1[2] = "3.jpg";
var random = Math.floor(Math.random() * myImage1.length);
document.getElementById("image").innerHTML = "<img src='"
+ myImage1[random] + "' alt='image'></img>";
}
</script>
My button is placed in <body>:
<button onclick="randomImg1();OpenInNewTab();">click</button>
<div id="image"></div>
Use https://www.w3schools.com/jsref/met_win_open.asp to open a new window. Add the spec parameter to make it open as a new window instead of a tab. And make sure to pass the full path of the image:
<script type="text/javascript">
function randomImg1() {
var myImage1 = new Array();
myImage1[0] = "1.jpg";
myImage1[1] = "2.jpg";
myImage1[2] = "3.jpg";
var random = Math.floor(Math.random() * myImage1.length);
// create the full image URL
var imageUrl = window.location.protocol + '//' + window.location.host + window.location.pathname + myImage1[random];
// open in a new window. ideally use the image's size for w and h
window.open(imageUrl, '_blank', 'height=300,width=300');
}
</script>
I get the following error when I click my refresh button:
caught TypeError: Cannot read property 'length' of undefined
at getRandomImage (index.html:85)
at HTMLInputElement.onclick (index.html:11)
See this snippet:
var myArray = new Array();
getRandomImage(myArray, "");
function getRandomImage(imgAr, path) {
path = path || 'C:/Users/Owen/Desktop/1-800MemeLine-master/memes/'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var imgStr = '<img src="' + path + img + '" alt = "">';
document.write(imgStr); document.close();
}
<form>
<INPUT TYPE="button" onClick="getRandomImage()" VALUE="More MEME plz">
</INPUT>
</form>
It works fine with the button refreshing the page but most of the people on my website have bad internet which takes a long time to reload the page so only loading the image and not the background and text and unnecessary things.
Link to github REPO: https://github.com/odude102/1-800MemeLine/blob/master/index.html
This is not the best solution, but it fixes your problem:
var myArray = new Array();
var path = 'C:/Users/Owen/Desktop/1-800MemeLine-master/memes/';
getRandomImage();
function getRandomImage() {
var num = Math.floor( Math.random() * myArray.length );
var img = myArray[ num ];
var imgStr = '<img src="' + path + img + '" alt = "">';
document.write(imgStr);
document.close();
}
this is my code: I want to ask
<script type="text/javascript">
var total = 4;
</script>
How can I do this?
<img src="img/apple_" + total + ".png" id="imageBox"/>
I've been try to use call function and document.onload but it's not work at all, can somebody save me?
I am supposing you just want to update the image src with javascript.
document.getElementById('imageBox').src = "img/apple_" + total + ".png";
You need to add html in JavaScript like this:
<div id="foo"></div>
<script type="text/javascript">
var total = 4;
document.getElementById('foo').innerHTML = '<img src="img/apple_' + total + '.png" id="imageBox"/>';
</script>
window.onload = function() {
var total = 4;
document.getElementById('imageBox').src = 'img/apple_' + total + '.png"';
};
<img src="" id="imageBox"/>
Here is a clean way to do this.
Demo
var create_img_element = function(total, targetId){
//create the img element
var img = document.createElement('img');
//set the source of the image
img.src = 'img/apple_' + total + '.png';
//add the image to a specific element
document.getElementById(targetId).appendChild(img);
}
create_img_element(5, 'foo');
i want to make random image with link, but i didnt understand. anyone can help me?
this is the javascript in header
<script type="text/javascript">
var random_images_array = ['banner/headline/chrome.png','banner/headline/thunderbird.png','banner/headline/vlc.png'];
function getRandomImage(imgAr, path) {
path = path || 'images/';
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var lnk = imgAr[ num ];
var imgStr = '<img src="' + path + img + '" alt="" class="img-responsive">';
document.write(imgStr); document.close();
}
</script>
this is the javascript in body
<script type="text/javascript">
getRandomImage(random_images_array, 'images/')
</script>