Develop Reference

need help removing an IMG and replacing it with text in its position with javascript

Im working on a project and a part of it is making an image disapear on hover, and replace that with text in the same location! I have to do it through javascript.
im very new to front end web development so any help would be great!
.main-img1{
height: 400px;
width: 600px;
margin-top: 80px;
background-size: 600px 400px;
box-shadow: 10px 10px 5px rgb(24, 22, 22);
position: relative;
text-align: center;
font-size: 25px;
color: black;
border-radius: 50px;
}
.img1-text{
display: none;
position: absolute;
bottom: 8px;
left: 150px;
<section class="main-body">
<div>
<img class="main-img1" src="img/automotive.jpg">
<h1 class="img1-text" id="img1text"> Here are some samples of my automotive photography! I specialize in "Rolling Shots" which are caputring a vehicle in motion, while the background and foreground show the motion.</h1>
</div>

You can replace any element using the "magical" outerHTML like this...
First, I gave your image an ID to make javascript operations easier...
<img id="I" class="main-img1" src="img/automotive.jpg">
Now replace the image with a paragraph of text...
I.outerHTML='<p>Well what do you know!</p>';
For easy one-line HTML...
<img onmouseover="this.outerHTML='<p>Well what do you know!</p>';" class="main-img1" src="img/automotive.jpg">

First off, this is a very odd thing to do in Javascript. Usually hover states, appearing and disappearing, etc. are handled by CSS.
to do it in js you have to add a mouseover event listener to the image to execute a function to grab the element you want to disappear, add a css class to apply "display: none" to it, grab the element you want to appear and remove a class that adds "display: none" from it.
assuming you have a 'display-none' class on your text element that applies 'display: none' to it, you can do this:
const image = document.querySelector('.main-image1')
const text = document.querySelector('.img1-text')
image.addEventListener('mouseover', () => {
image.classList.add('display-none')
text.classList.remove('display-none')
}
if you were to do this with css its as simple as
.image {
z-index: 2;
}
.image:hover {
display: none;
}
.text {
z-index: 1;
}
that way the text is set behind the image and when you hover over the image it disappears. This also has the benefit of when you take your cursor off the image for the image to reappear where js will need to be told explicitly to do that.

Two photos positioned on each other. Show one on hover. Possible with css or only javascript?

What I want to do is to show the top photo (which is set to visibility: hidden) on hover. I have two photos positioned on each other like this:
<div class="frame">
<img src="./img/portfolio/default1.jpg" width="300" height="178" alt="Title Here"></a>
<div class="boxwrapper" style="visibility: hidden;"></div>
</div>
Added the second photo through css:
.boxwrapper {
background: url("../img/boxPlus.gif");
position: relative;
width: 300px;
height: 178px;
left: -6px;
top: -184px;
z-index: 1000;
}
Is it possible to do with css? Tried (and several more options):
#frame img:hover .boxwrapper {
visibility: visible;
}
But it is not working. Or this is only possible with javascript? If yes, please give some tips as I am not too much of javascript guy. Thanks!

You could set the photo as background of the boxwrapper
.boxwrapper{
background: url("../img/boxPlus.gif");
}
.boxwrapper:hover{
background: url("../img/portfolio/default1.jpg");
}
if this is not possible you could add it as background trough a style attribute inside your html
<div class="boxwrapper" style="background: url('../img/boxPlus.gif');" ></div>

You'd have to put the :hover class on a parent container. CSS does not allow such things to trickle "up" the tree, only down.
.boxwrapper {
display: none;
}
.frame:hover .boxwrapper {
display: block;
}

Position badge over corner of image automatically

I have a layout where images "float" within a certain area. The layout looks like this:
The source like this:
<div class="free_tile">
<a class="img_container canonical" href="/photos/10">
<img class="canonical" src="http://s3.amazonaws.com/t4e-development/photos/1/10/andrew_burleson_10_tile.jpg?1303238025" alt="Andrew_burleson_10_tile">
<!-- EDIT: I am aware that I can put the badge here. See the edit notes and image below. -->
</a>
<div class="location">Houston</div>
<div class="taxonomy"> T6 | Conduit | Infrastructure </div>
</div>
The CSS looks like this (in SCSS):
div.free_tile { width: 176px; height: 206px; float: left; margin: 0 20px 20px 0; position: relative;
&.last { margin: 0 0 20px 0; }
a.img_container { display: block; width: 176px; height: 158px; text-align: center; line-height: 156px; margin-bottom: 10px; }
img { margin: 0; border: 1px solid $dark3; display: inline-block; vertical-align: middle; #include boxShadow;
&.canonical { border: 1px solid $transect; }
}
.location, .taxonomy { width: 176px; }
.location { font-weight: 700; }
.taxonomy { line-height: 10px; font-size: 10px; text-transform: uppercase; height: 20px; overflow: hidden; }
}
div.transect_badge { height: 20px; width: 20px; background: url('/images/transect-badge.png'); }
So, basically the images are sitting vertically-aligned middle and text-aligned center, and they have a maximum width of 176 and max height of 158, but they're cropped to maintain the original aspect ratio so the actual top corner of each image falls differently depending on which image it is.
I have a badge that I'd like to put in the top corner of certain images (when the image is "canonical"). You see the style for this above (div.transect_badge).
The problem, of course, is I don't know where the top corner of the image will be so I can't hardcode the position via CSS.
I assume that I'll need to do this via jQuery or something. So, I started with a jQuery method to automatically append the badge div to any canonical images. That works fine, but I can't figure out how to position it over the top left corner.
How can this be done? (ideally using just HTML and CSS, but realistically using JS/jQuery)
--EDIT--
Here's the problem: The image is floating inside a container, so the corner of the image might fall anywhere inside the outer limits of the container. Here's an example of what happens if I try to use position:absolute; top:0; left:0 inside the same container the image is bound by:

It took some tryouts, but here it is: the size independent image badge positioner.
HTML:
<div class="tile">
<span class="photo">
<img src="/photos/10.jpg" alt="10" /><ins></ins>
</span>
<p class="location">Houston</p>
<p class="taxonomy">T6 | Conduit | Infrastructure</p>
</div>
CSS:
.tile {
float: left;
width: 176px;
height: 206px;
margin: 0 20px 20px 0;
}
.photo {
display: block;
width: 176px;
height: 158px;
text-align: center;
line-height: 158px;
margin-bottom: 10px;
}
a {
display: inline-block;
position: relative;
line-height: 0;
}
img {
border: none;
vertical-align: middle;
}
ins {
background: url('/images/badge.png') no-repeat 0 0;
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
}
Example:
In previous less successful attempts (see edit history), the problem was getting the image vertically centered ánd to get its parent the same size (in order to position the badge in the top-left of that parent). As inline element that parent doesn't care about the height of its contents and thus remains to small, but as block element it stretches to hís parent's size and thus got to high, see demonstration fiddle. The trick seems to be to give that parent a very small line-height (e.g. 0) and display it as an inline-block. That way the parent will grow according to its childs.
Tested in Opera 11, Chrome 11, IE8, IE9, FF4 and Safari 5 with all DTD's. IE7 fails, but a center-top alignment of the photo with badge at the right position isn't that bad at all. Works also for IE7 now because I deleted the spaces in the markup within the a tag. Haha, how weird!

EDIT3: This solution is very similar to my original solution. I didn't really look at your code much so I should have noticed this earlier. Your a tag is already wrapping each image so you can just add the badge in there and position it absolute. The a tag doesn't need width/height. Also you must add the badge image at the beginning of your a tag.
Demo: http://jsfiddle.net/wdm954/czxj2/1/
div.free_tile {
width: 176px;
height: 206px;
float: left;
}
a.img_container {
display: block;
margin-bottom: 10px;
}
span.transect_badge {
display:block;
position: absolute;
height: 20px;
width: 20px;
background-image: url('/images/transect-badge.png');
}
HTML...
<a class="img_container canonical" href="/photos/10">
<span class="transect_badge"></span>
<img class="canonical" src="path/to/img" />
</a>
Other solutions...
In my code I'm using SPAN tags so simulate images, but it's the same idea. The badge image, when positioned absolute, will create the desired effect.
Demo: http://jsfiddle.net/wdm954/62faE/
EDIT: In the case that you need jQuery to position. This should work (where .box is your container and .corner is the badge image)...
$('.box').each(function() {
$(this).find('.corner')
.css('margin-top', ( $(this).width() - $(this).find('.img').width() ) / 2);
$(this).find('.corner')
.css('margin-left', ( $(this).height() - $(this).find('.img').height() ) / 2);
});
EDIT2: Another solution would be to wrap each image with a new container. You would have to move the code that you use to center each image to the class of the new wrapping container.
Demo: http://jsfiddle.net/wdm954/62faE/1/
$('.img').wrap('<span class="imgwrap" />');
$('.imgwrap').prepend('<span class="badge" />');
Technically you can just add something like this to your HTML though without using jQuery to insert it.

Use an element other than <div>, e.g. <span> and put it inside your <a> element after the <img> element. Then, give the <a> element position:relative; and the <span> gets position:absolute; top:0px; left:0px;. That is, if you don't mind the badge also being part of the same link - but it's the easiest way. Also, the reason for using <span> is to keep your HTML4 valid, <div> would still be HTML5 valid, however.

I did find one solution using jQuery. I don't prefer this because it noticably impacts page loading, but it is acceptable if nothing else will work. I'm more interested in NGLN's idea which seems promising but I haven't entirely figured out yet. However, since this thread has picked up a lot of traffic I thought I'd post one solution that I came up with for future readers to consider:
Given this markup:
<div class="free_tile">
<a class="img_container canonical" href="/photos/10">
<img class="canonical" src="http://s3.amazonaws.com/t4e-development/photos/1/10/andrew_burleson_10_tile.jpg?1303238025" alt="Andrew_burleson_10_tile">
<span class="transect-badge"></span>
</a>
<div class="location">Houston</div>
<div class="taxonomy"> T6 | Conduit | Infrastructure </div>
</div>
Same CSS as in question except:
span.transect-badge { display: block; height: 20px; width: 20px; position: absolute; background: url('/images/transect-badge.png'); }
Then this jQuery solves the problem:
$(function() {
$('img.canonical').load( function() {
var position = $(this).position();
$(this).next().css({ 'top': position.top+1, 'left': position.left+1 });
});
});
Like I said, though, this incurs noticeable run-time on the client end, so I'd prefer to use a non JS solution if I can. I'll continue to leave this question open while I test out and give feedback on the other solutions offered, with hopes of finding one of them workable without JS.

CSS or JavaScript to highlight certain area of image opacity

I'm looking to do something like this but with CSS or JavaScript.
I need to highlight a certain part of an image but everything I find is how to do it in Photoshop. Can I do this with CSS or maybe JavaScript?
Am I even asking the right question?
EDIT:
Well here is a great submission but I have a follow up question:
I need this for a mobile device and portrait and landscape views as well for many devices like: iOS, iPad, Android, WebOS, Etc... So the fixed position I'm not sure will work.
Any advice?

You could use background-position with absolutely positioned divs as follows:
CSS:
.container {
position:relative;
height:455px;
width:606px;
}
.container div {
position:absolute;
background-image:url(http://www.beachphotos.cn/wp-content/uploads/2010/07/indoensianbeach.jpg);
}
.container .bg-image {
opacity:0.3;
height:455px;
width:606px;
}
.container div.highlight-region {
height:50px;
width:50px;
opacity:0;
}
.container div.highlight-region:hover {
opacity:1;
}
HTML:
<div class="container">
<div class="bg-image"></div>
<div class="highlight-region" style="top:50px;left:50px;background-position: -50px -50px;"></div>
<div class="highlight-region" style="top:150px;left:150px;background-position: -150px -150px;"></div>
</div>
Please see http://jsfiddle.net/MT4T7/ for an example
Credit to beachphotos.com for using their image.
EDIT (response to OP comment): Please also see http://jsfiddle.net/zLazD/ I turned off the hover aspect. also added some borders.
CSS changes:
.container div.highlight-region {
height:50px;
width:50px;
border: 3px solid white;
}
/* removed :hover section */

You can probably fake it, here is a sample:
http://jsfiddle.net/erick/JMBFS/3/
I covered the image with an opaque element. The color of the element is the same as the background of the image. Used z-index to put it on top.

You sure can. For example, most crop plugins provide "highlighting" as the basis of their UI. So for a complete cross-browser solution, just use an existing plugin, like Jcrop.
Of course, you might want it to be fixed, in which case you can programmatically tell the plugin which section to highlight and that the user shouldn't be able to move it, and then it will act as a highlighter, not a cropper.

These are the steps you can take to highlight a part of an image:
Access the image in JavaScript, and dynamically add another identical image immediately after it. (this could be done just in HTML, but it would change the semantics of your markup)
Position the second image over the first image
Apply a css mask on the second image so that only the "highlighted" part shows up
When the user hovers over the images' container, adjust the opacity of the first image.
I can provide more technical details on this later if need be.

What about overlaying the cropped image (with 100% opacity) on top of the whole image (with 30% opacity)?
This answer is only a proof of concept
body {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.img {
position: absolute;
top: 0;
left: 0;
}
.img-base {
opacity: 0.3;
z-index: -99;
}
.img-overlay {
opacity: 1.0;
}
.cropper{
width: 150px; /* input width and height of the box here */
height: 120px;
overflow: hidden;
position: relative;
padding: 0 0 0 0;
margin: 0 0 0 0;
left: 90px; top: 170px; /* input starting location of the box here */
}
#overlay1 {
position: absolute;
left: 0px; right: 0px;
margin-left: -90px; margin-top: -170px; /* input starting location of the box here */
}
<img src="https://images.unsplash.com/photo-1583355862089-81e9e6e50f7a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="img img-base">
<div class="cropper">
<img src="https://images.unsplash.com/photo-1583355862089-81e9e6e50f7a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="img img-overlay" id="overlay1">
</div>

Clicking on a div placed over an image in IE

I have an image which may have some divs over it (specifying certain selections within that image). These divs are supposed to be clickable. Something like that:
#divOuter { width: 500px; height: 500px; border: 2px solid #0000FF; position: relative; }
#divInner { width: 100px; height: 100px; border: 2px solid #00FF00; position: absolute; cursor: pointer; top: 20px; left: 20px; }
<div id="divOuter">
<img src="SomeImage.jpg" />
<div id="divInner"></div>
</div>
$("#divOuter").click(function() { alert("divOuter"); });
$("#divInner").click(function() { alert("divInner"); });
In chrome and FF it works as expected (pointer appears over the div, and clicking it alerts "divInner" and then "divOuter").
However, in IE8 it didn't - I got the same behavior only when hovering/clicking on the inner div borders. When clicking inside that div, only "divOuter" was alerted.
How can this be fixed?

Here's a hack: add an CHAR like "O" to the inner div, and then give it an enormous font size(depends on the area you want to span over):
#divInner { /* ... */; font-size: 1000px; color: transparent; }
(Also set "overflow: hidden" I think.)
IE likes there to be something there in the container for the click to affect. If it's just completely empty, it ignores clicks.
a fiddle: https://jsfiddle.net/cbnk8wrk/1/ (watch in IE!)

I had the same problem with an unordered list, see Getting unordered list in front of image slide-show in IE8, IE7 and probably IE6
The solution : give the div a background color and make it transparent with a filter.

Adding an 1x1 px transparent background gif to the div is also working.
#divInner { background: url(/images/transparent.gif); }