We Keep Coding

Can I open a thumbnail image in a new full-sized window using CSS or JavaScript?

I'm using an application (WebWorks 2020.1) that automatically generates <img> tags from my FrameMaker source input when published to DHTML. I cannot edit the HTML <img> or <a> tags directly, only the HTML page ASP template and CSS classes in an attached stylesheet. Here's the generated output for an image with surrounding code:
<div class="picture">
<a name="628774">
<img class="Anchored_Frame" src="images/CreateWarehouse_thumb_7.png" style="display: inline; left: 0.0pt; max-height: 51px; max-width: 400px; top: 0.0pt" alt="" title="" usemap="#uGbGKlB3y6o_625462" width="100%" border="0">
<map name="uGbGKlB3y6o_625462"><area coords="0,0,400,51" shape="rect" href="images/CreateWarehouse_7.html" alt="" title=""></map>
</a>
</div>
The DHTML output will be integrated with a web application that opens context-sensitive help in a 450-px-wide pane within the displayed product page. Images appear as 400-px thumbnails in the DHTML pages, as shown in the above code.
I've been able to achieve opening the image when clicked on, but it opens in the same browser window (the help pane), which is limited to 450 px so does not expand the image. (Images are responsive and get bigger as the browser window is enlarged, but this won't be possible in the 450-px pane.) When the user clicks on the image, I want it to open a new, full-sized browser window or tab.
I can add a JS script to the page template. And I can add/edit a CSS style such as img.Anchored_Frame. Is there a way to open a thumbnail image in a new full-sized browser tab or window using only CSS or JavaScript? Keep in mind that I cannot edit <a> or <img> tags directly. Thanks for your help for a newbie.

if you get the same structure like you showed in your question for all the images:
<div class="picture">
<a name="">
<img>
<map>
</a>
</div>
this should work:
var images = document.getElementsByClassName('picture')
for(var i = 0 ; i < images.length; i++){
images[i].childNodes[1].childNodes[3].setAttribute("target", "_blank");
}
the idea is to add to the <map> target="_blank"

Image not being rendered on the screen in new window

I have the following code for viewing an image in a new window. Both code snippets are able to produce the same HTML in the new window but the first one is not rendering the image and the second one is working fine.
<a onclick="window.open(this.href);return false;" href="javascript: var i = new Image(250, 250);i.src='image_url'; document.body.appendChild(i);" >VIEW1</a>
<a onclick="window.open(this.href);return false;" href="javascript: document.body.innerHTML='<img width="250" height="250" src="image_url"/>';">VIEW2</a>
I want to know why innerHTML is working and appendChild not working

The "URL" is for the link to the picture, and the "text" is there as a description if the Image should for some reason not load (broken requests)
<a onclick="window.open(this.href);return false;" href="javascript: document.body.innerHTML='<div><Img width="250" height="250" src="file:///home/lt-176/tudip-image.jpg" alt="text"></div>';">VIEW2</a>
image src path to give full path...is working

How to put the ALT-value of an image into a variable in javascript or jquery

I’ve made a cardspread program that is based on the source of the image. It works allright, but it is loading slowly, because now 78 different cards are loaded. I like to speed up the loading and I thought I needed an extra item per DIV. So I added an ALT-tag to each image. Like this:
<div id="kaart1">
<alt=kaart14.jpg>
<img src="images/kaart1.jpg" width="110" height="180" onclick="showDiv(event)>
</alt=kaart14.jpg>
</div>
Now I need only 1 image to load 78 times, which is faster. The problem which I am facing now is that I want to read the alt value into a variable (in this case: kaart14.jpg).
I’ve tried :
$('.status').click(function() {
var status = $(this).attr('alt');
});
But that stays empty. Does anyone have a suggestion how to solve this in Javascript or jQuery?

First, there is no <alt> tag. It is used as alternative to <img>. The value is displayed if the image is not loaded.
It is just plain text. If you put a url there, it will just display the url and not the image itself.
Eg:
<img src="myphoto.jpg" alt="This is my photo">
There is no performance gain if you use alt or not, but you definitely SEO

Your alt attribute should be like
<div id="kaart1">
<img src="images/kaart1.jpg" alt="kaart Image" width="110" height="180" onclick="showDiv(event)>
</div>
alt is an attribute of the img tag,its not a tag itself.And as #Bergi said,the alt attribute will not be an another image.It may be the description.

Image thumbnail is not loading and onmousehover my images move up when hovering over an image?

?I am having an issue with a website i uploaded to test. They all work work fine when they are checked locally in Dreamweaver cs6 but when uploaded they do this, Roll over the images you will see the problem, when hovering over Texas longhorn image there is a problem and the Michigan state image isn't loading Anyone see my error.
Here is the code that matters Thanks for any help And the link to the site page http://odintest.co.nf/product_select.html
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
<div id="main_img">
<img id="img" src="images/placeholder.jpg"/>
</div>
<div id="thumb_img">
<img src='images/notredamelogo.JPG' width="200" height="150" onmouseover='changeImage("images/notredame.JPG");'>
<img src="images/ohiostatelogo.jpg" onmouseover='changeImage("images/ohiostate.jpg");'>
<img src='images/michiganstatelogo.jpg' onmouseover='changeImage("images/michiganstate.jpg");'>
<img src='images/floridagatorslogo.jpg' onmouseover='changeImage("images/floridagators.jpg");'>
<img src='images/texaslonghornslogo.jpg' onmouseover='changeImage("images/texaslonghorns.jpg");'>
</div>

I don't know what problem you're describing, but I'm guessing a hover delay. Use a javascript preloader or load them in a div with styles along the lines of {position: absolute; left: -999em;} to keep them offscreen. This makes the images available immediately on hover, where normally you'd see a delay while they're downloaded.
The image at http://odintest.co.nf/images/texaslonghorns.jpg doesn't seem to exist on the server.

Well I see 2 issues.
For me the "notredamelogo.JPG" did not load. Probably because of "JPG". Try "jpg" instead.
Main image does not load for texaslonghorns. That might be because the image does not exist in that directory and/or the image name or extension is not right.

Fancybox not working with images from Twitter API

With Fancybox 2 the example below works flawlessly (left out other code)
<a class="fancybox" href="https://si0.twimg.com/profile_images/2169856486/avatar.jpg" title="some title">
<img src="http://a0.twimg.com/profile_images/2169856486/avatar_normal.jpg" alt="" />
</a>
but the code below load the image on a separate page
<a class="fancybox" href="https://api.twitter.com/1/users/profile_image?screen_name=boris&size=original" title="some title">
<img src="http://a0.twimg.com/profile_images/2169856486/avatar_normal.jpg" alt="" />
</a>
The problem seem to be with the image URL the Twitter API supplies which returns a (301) redirect to the actual location of the full image. Is there any way i can get Fancybox to work with images that are supplied using a redirect and that the popup window still has the size of the served image.
Help would be appreciated.
Frank

Since the second code/link doesn't contain an image extension (jpg, gif, png), fancybox cannot determine what type of content is trying to open so you need to tell it.
Either do :
One: Add the type option to your custom script
$(".fancybox").fancybox({
type: "image"
});
Two : add the data-fancybox-type attribute to your link
<a class="fancybox" data-fancybox-type="image" href="https://api.twitter.com/1/users/profile_image?screen_name=boris&size=original" title="some title"><img src="http://a0.twimg.com/profile_images/2169856486/avatar_normal.jpg" alt="" /></a>