I am getting warmed up with Javascript so I am trying something on my own. I am searching for a onclick function, where I have thumbnail images in my index.html page, and whenever a user clicks the image he will be redirected to a new page where the image is again displayed along with some information about it. Right now I am doing it using just plain HTML.
I want to use javascript to navigate to the page corresponding to the image the user has clicked. Is that possible to do using onclick? I have more than 10 images on my webpage and each time a user clicks an image I want to get the id of that image and redirect it to the new page. The new page is named after the image name.
For ex:
image name: bottle.jpg (residing in the images folder)
redirect page name: bottle.html (residing in the main folder)
<a href="bottle.html" id="bottle" ><img src="../images/bottle.jpg" alt="bottle" class="thumbnails" /></a>
Any valuable information will be appreciated!
If it is somewhere asked in this forum, it would be helpful if somebody can give me that link.
Thanks,
Raaks
maybe this is what u want?
<a href="#" id="bottle" onclick="document.location=this.id+'.html';return false;" >
<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" />
</a>
edit: keep in mind that anyone who does not have javascript enabled will not be able to navaigate to the image page....
Because it makes these things so easy, you could consider using a JavaScript library like jQuery to do this:
<script>
$(document).ready(function() {
$('img.thumbnail').click(function() {
window.location.href = this.id + '.html';
});
});
</script>
Basically, it attaches an onClick event to all images with class thumbnail to redirect to the corresponding HTML page (id + .html). Then you only need the images in your HTML (without the a elements), like this:
<img src="bottle.jpg" alt="bottle" class="thumbnail" id="bottle" />
<img src="glass.jpg" alt="glass" class="thumbnail" id="glass" />
I'd set up your HTML like so:
<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" id="bottle" />
Then use the following code:
<script>
var images = document.getElementsByTagName("img");
for(var i = 0; i < images.length; i++) {
var image = images[i];
image.onclick = function(event) {
window.location.href = this.id + '.html';
};
}
</script>
That assigns an onclick event handler to every image on the page (this may not be what you want, you can limit it further if necessary) that changes the current page to the value of the images id attribute plus the .html extension. It's essentially the pure Javascript implementation of #JanPöschko's jQuery answer.
You can define a a click function and then set the onclick attribute for the element.
function imageClick(url) {
window.location = url;
}
<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" onclick="imageClick('../images/bottle.html')" />
This approach lets you get rid of the surrounding <a> element. If you want to keep it, then define the onclick attribute on <a> instead of on <img>.
Related
I have a button on my html code:
<input type="button" id="myBtn" value="Next Widget" onclick="next()">
and on my javascript I have:
images = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg', 'img/6.jpg', 'img/7.jpg', 'img/8.jpg', 'img/9.jpg', 'img/10.jpg'];
page = 0;
function next()
{
page++;
page %= images.length;
document.getElementById('myImg').src = images[page];
}
Also on HTML code:
<div>
<img id="myImg" width="auto" height="auto" src="img/1.jpg" alt="1">
<br>
</div>
Basically I need to change it from the saved images source to a RESTapi Url, which is sorted by id (1 to 10).
Not sure how I do this. Can anyone give me an idea.
Do I have to declare the RESTapi Url first on the javascript?
I have tried just pasted the URL in the src="My URL here". But this only shows me a broken link.
If you have direct image url you can just copy paste in your images array. If it is not the case then you will have to load your images or data first through rest api call.
I have a small program in JSP which basically when I click on a document, it opens a new window that allows me to view it. The problem here is it would not show the viewer unless I update or install adobe flash player.
I added a hyperlink link where I can easily click on it and it prompts me to "Allow" to view the document which is fine. The hyperlink looks like below:
<a href="https://get.adobe.com/flashplayer" >Enable Flash</a>
<img border="0" alt="Enable Flash" src="enable_flash.gif"/>
Now, I have to manually click on it, is there a way I can have the hyperlink auto clicked when the pop up windows shows?
I am new to JavaScript and HTML so I figured there is something that I could use like <body onload > .
Edit
This is how my code looks like now:
<body onload="Auto()" > <!--oncontextmenu="return false;"-->
<script>
function Auto(){
<a href="https://get.adobe.com/flashplayer" >Enable Flash</a>
<img border="0" alt="Enable Flash" src="enable_flash.gif"/>
}
</script>
Am I doing anything wrong?
You can simply use click() method
Add id to anchor element
<a href="https://get.adobe.com/flashplayer" id="myLink" >Enable Flash</a>
Add to your script
function automateClick() {
document.getElementById('myLink').click()
}
window.addEventListener("load", automateClick);
Yes..you can use below code and load your link there
$(document).ready(function() {
document.querySelector('a[href="https://get.adobe.com/flashplayer"]').click();
});
OR
$(function() {
document.querySelector('a[href="https://get.adobe.com/flashplayer"]').click();
});
OR
window.onload = function() {
document.querySelector('a[href="https://get.adobe.com/flashplayer"]').click();
}
You can do this with as little as one line, if you want to learn more about the approach I've used, then it may be worth your time looking into functions such as querySelector. Once you have the desired element, you can then simply fire the click method like so.
Demo
<script type="text/javascript">
document.querySelector('a[href="https://get.adobe.com/flashplayer"]').click();
</script>
I have a flash object embedded inside a DIV. Now I want to use a link('a' tag) above that div for the user to be able to reload that flash dialer, or more specifically the div tag it is contained in(I cannot change the flash file in any way).
I've tried using this JS function below, but it does not work(does not reload the div and contents when hitting the 'reload' link.
<div class="userProfile">
<script type="text/javascript">
function refreshDialer(){
document.getElementById("dialerDiv1").contentWindow.location.reload(true);
}
</script>
Reload
<div id="dialerDiv1">
<embed type="application/x-shockwave-flash" wmode="opaque"
src="http://dummysite.com"
width="301"
height="401"
id="popUpSwf"
name="popUpSwf"
quality="high"
border="none"
allowscriptaccess="always"
pluginspage="http://www.adobe.com/go/getflashplayer"
scale="noscale"
menu="false"
flashvars="#" />
</div>
</div>
What am I doing wrong here?
Thanks
Try this:
function refreshDialer(){
//alert("In function");
var container = document.getElementById("dialerDiv1");
var content = container.innerHTML;
//alert(content);
container.innerHTML= content;
}
In action using youtube link as example.
You can, but the way you have used is wrong. When you want to reload something, you can just append a search query, so that it refreshes the source.
For Eg., when there is a frequently changing image (say captcha) and you wanna load it again, without refreshing the browser, you can do this way:
Initial Code:
<img src="captcha.png" alt="captcha" />
Refreshed Code:
<img src="captcha.png?1" alt="captcha" />
So, the same technique can be used in your page too. So the DIV's ID is 'dialerDiv1' right, for that, if you use jQuery, you can refresh this way:
function refreshDialer()
{
var d = new Date();
document.getElementByTagName('embed')[0].setAttribute('src', + document.getElementByTagName('embed')[0].getAttribute('src') + d.getMilliseconds());
}
Or if you are not using jQuery, you need to use the setAttribute() function this way:
function refreshDialer()
{
var d = new Date();
$('#dialerDiv1 embed').attr('src', $('#dialerDiv1 embed').attr('src') + d.getMilliseconds());
}
Simple. Hope this helps.
A client has a site where video content is populated by AJAX from a video CDN. Each link is built like so:
<a class="thumb-link" href="/?video='.$video->id.'" onclick="show_video('.$video->id.', \''.$section.'\'); return false;"><img src="'.$thumb.'" width="100" height="65" alt="" align="left" /></a>
But they report that analytics is not tracking the href, since the onclick is telling a Flash player to load the content via javascript instead of go to a page and load the video.
What can I do (without going to a physical page) to track this click as if they clicked through to a page?
Can I add to the onclick and do something like:
http://code.google.com/apis/analytics/docs/gaJS/gaJSApiBasicConfiguration.html#_gat.GA_Tracker_._trackPageview
Add to the anchor: onclick="trackVideo();"
Then, with javascript:
function trackVideo() {
path = $(this).attr("href");
var pageTracker = _gat._getTracker("UA-XXXXX-XX");
pageTracker._trackPageview(path);
}
I am not too familiar with Analytics, so if someone could get me in the right direction that would be great.
Your example is correct. That would do exactly what you want :)
I have the following code in my html
<input type="image" src=images/more.png onClick="showInviteInfo() />
When clicked it brings up a pop up box via this js function.
function showInviteInfo(){
document.getElementById("divsignup").style.visibility = "visible";
document.getElementById("txtemail").focus();
}
But I no longer want it to bring up pop up rather when clicked take user to a new page. What do I need to change? Probably easy, but I am a newbie.
Use
window.location = "new location path";
in your function.
window.location
If you can use an anchor tag then it would be like this.
Click here to navigate to new page
change
<input type="image" src=images/more.png onClick="showInviteInfo() />
to
<img src="images/more.png" />
EDIT: sorry, the editor was giving me grief with the second line