/    Sign up×
Community /Pin to ProfileBookmark

onclick in external file window.open and replace image

Copy linkTweet thisAlerts:
Mar 01.2012

Hi

I guess my problem has to do with not knowing where to put [I]this[/I].
I dont know though…

I want to open a new window and show a image called image.jpg.
When putting onclick inline you put this.src in parentheses when calling for the function.

<script type=”text/javascript”>
function init()
{

var k = document.getElementById(“test”);

k.onclick = kn;

}

function kn()
{
var newimgSrc = picsrc.replace(“_small”,””);
window.open(newimgSrc);
}

window.onload = init;

</script>

<body>

<input type=”image” src=”image_small.jpg” id=”test”>

</body>

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@hyperionXSMar 01.2012 — [code=html]
<script type="text/javascript">
function init()
{
var k = document.getElementById("test");
k.onclick = kn;
}
function kn()
{
var newimgSrc = this.src.replace("_small","");
window.open(newimgSrc);
}
window.onload = init;
</script>
<body>
<img src="image_small.jpg" id="test">
</body>
[/code]
Input type="file" is for something else. Use img
Copy linkTweet thisAlerts:
@avbrytauthorMar 01.2012 — Ok,

It does not open a new window.

do you think the rest of the code is ok?
Copy linkTweet thisAlerts:
@hyperionXSMar 01.2012 — [CODE]
window.open (newimgSrc,"_blank");
[/CODE]
Copy linkTweet thisAlerts:
@avbrytauthorMar 01.2012 — Thanks for trying to help me!

Have you tried this?

I don´t get it to work but maybe the things

you have told me are right and I just have

to make the image clickable??

?
Copy linkTweet thisAlerts:
@nap0leonMar 01.2012 — Running the page as http://localhost/test.html, it works fine for me in FF 10.0.2 and IE8.

Running the page as file:///C:/Inetpub/wwwroot/test.html, it works in FF 10.0.2 but receives an "access denied" error in IE8.

IE does not like filepaths as URLs for new windows.
Copy linkTweet thisAlerts:
@avbrytauthorMar 01.2012 — [code=html]
<script type="text/javascript">
function init()
{
var k = document.getElementById("test");
k.onclick = kn;
}
function kn()
{
var newimgSrc = this.src.replace("_small","");
window.open(newimgSrc);
}
window.onload = init;
</script>
<body>
<img src="image_small.jpg" id="test">
</body>
[/code]
Input type="file" is for something else. Use img[/QUOTE]

Thanks a lot!! I totally missed the changes you made and only saw the thing you wrote about Input type.

Great,

:=)
Copy linkTweet thisAlerts:
@avbrytauthorMar 05.2012 — Hi there ?

If I would like it to work for more than one image using the same function?

I have tried to use getElementsByTagName and tried different solutions with no luck.

Do I have to give every image a classname?

I would like a function do the job for all images.
Copy linkTweet thisAlerts:
@avbrytauthorMar 05.2012 — Ok, tried this but no luck.

function init() {

var kn = document.getElementsByTagName("img");

for(var i = 0; i < kn.length ;i++)

{

kn.onclick = Ve;

}

}

function Ve()

{

var newimgSrc = this.src.replace("_small","")

window.open(newimgSrc);

}

window.onload = init;


I tried this:

var kn = document.getElementsByTagName("img")[0];

without the for loop and that worked for only the first image...:o
Copy linkTweet thisAlerts:
@avbrytauthorMar 06.2012 — Am I totally lost or close a solution??

I´m feeling lost...

??
Copy linkTweet thisAlerts:
@avbrytauthorMar 08.2012 — Hi,

Here´s a solution for a generic function for all the images that you would like to open in a new window with a bigger version of the picture:



window.onload = function init(){

var images = document.getElementsByTagName("img");

for(var i=0; i<images.length; i++){

images[i].onclick = function init(){
var newimgSrc = this.src.replace("_small","")
window.open(newimgSrc);

};

}

}



?
×

Success!

Help @avbryt spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...