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.

How to show a dropdown when you hover over a specific area an on image? (HTML, CSS)

Is it possible to show a dropdown whenever you hover over some specific area on an image? For example, if my mouse is within 50,62 and 70,80. I already tried this with invisible boxes and divs, but the only way I could get them to overlay the image was with position properties, but they wouldn't stay in place if I reshaped or resized the screen. Any ideas?

Demo : http://jsfiddle.net/v8dp91jL/12/
The code is pretty self-explanatory.
Just two imp things:
Everything should be in %
the .dropdown is inside .hover-area so that when you move your mouse from .hover-area to .dropdown, .dropdown doesn't disappear because it is still technically inside .hover-area even tho it's visually not

You can add some hidden element (span) positioned on some specific area and it is going to trigger the hover:
HTML:
<div class="image-wrapper">
<span class="image-hover-trigger"></span>
<img src="..." >
<div class="dropdown"></div>
</div>
CSS:
.image-wrapper { position: relative; }
.image-hover-trigger { position: absolute; top: 20%; left: 20%; right: 20%; bottom: 20%; }
.dropdown { display: none; }
.image-hover-trigger:hover ~ .dropdown { display: block; }

How do I use CSS to alter the colour of my logo when I scroll onto a different background colour

I currently have a white SVG logo that I am using as my website is mostly dark backgrounds. However, I do have a section that is white so I am looking to change the colour of the logo to black while scrolling through the white section.
Here is a copy of the logo code and white section:
<!-- Logo -->
<div class="logo" style="display: block;">
</div>
<!-- About -->
<div class="scrollview about">
<div class="col-sm-3">
</div>
</div>
Here is my current styles:
.logo {
position: fixed;
top: 0;
left: 0;
margin: 20px;
padding: 2.8em 2.8em;
z-index: 9;
}
.logo a {
width: 95px;
height: 16px;
display: block !important;
background-image: url('../img/logo-light.png') transparent 0 0 no-repeat;
background-image: none,url('../img/logo-light.svg');
}
.about {
padding: 12.25em 10.25em;
margin: 0;
overflow: hidden;
background: #fff;
width: 100%;
height: auto;
z-index: 3;
}
I'm not sure if it can be done using only CSS, but if someone can even point me towards a plugin or script it would be much appreciated.
Thanks

You can't use CSS like that to change the style of an SVG that's in a separate file. CSS rules do not cross document boundaries.
To style the SVG, you would need to need to inline it in your HTML page.
Assuming you made that change, then you could add a scroll event handler to the page and watch the position of the logo. If you detect it is at the right point on the page (ie. it is over the white section), then you could add a class to it (or the <a> or the <div>). The class would change the colour of the logo using fill: black, or whatever.
Have you considered an easier solution? Such as giving the logo a dark outline, so that it stands out when over the white background?

The fill property in CSS is for filling in the color of a SVGs.
svg {
fill: currentColor;
}
But you can't change the color of your logo for specific section of your site.

i check your demo link and I found out that they are use jquery to add and remove css class from there logo.
So you need add jquery 2.3.+
get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();
Now on scroll add function
$(window).on('scroll',function()
and in it just add
stop = Math.round($(window).scrollTop());
if (stop > mainbottom) {
$('.logo').addClass('logo-dark');
} else {
$('.logo').removeClass('logo-dark');
}
Here's demo on codepen I made for you hope this will help you.

Change an image using only CSS.

I have something like
<a href="OnlyThisONE"
<img class="SameClassForAllIMG" src="random.png">
</a>
I would like to replace the image which something else using only CSS. Is this possible?
Here is the Javascript solution.
var images = document.getElementsByTagName('IMG');
for (var i = 0; i < images.length; ++i) {
if (images[i].src == "random.png")
images[i].src = 'new.png';
}
Here is a possible CSS solution
.SameClassForAllIMG {
background: url(new.png) no-repeat;
}
The issue is the CSS should do it for the IMG only under the "OnlyThisONE" href, and not all of them. Is this possible using only CSS?

This is possible using only CSS. You can target the image using a[href='OnlyThisONE'] and hide the <img> tag within, then apply a background to the <a> link.
CSS
a[href='OnlyThisONE'] img {
display: none;
}
a[href='OnlyThisONE'] {
background: url('somebackground.jpg');
width: 100px;
height: 100px;
display: block;
}

In CSS you could use either pseudo-element on <a> or a background-image in <a> or even in <img> that can only be seen on hover.
here is 2 demo
one using a pseudo-element
one using the img tag with a background. (no src changed).
http://codepen.io/anon/pen/Jchjw
<p>Set background-image, and resize it to zero with padding on :hover
<a href="#nature"><img class="a-img" src="http://lorempixel.com/120/80/nature/1">
</a></p>
<p>use a pseudo-element set in absolute position and overflow in a tag :
<a href="#nature3"><img class="a-img" src="http://lorempixel.com/120/80/nature/3">
</a></p>
img {
vertical-align:middle;
}
[href="#nature"]:hover .a-img {
height:0;
width:0;
padding:40px 60px;
background:url(http://lorempixel.com/120/80/nature/2);
}
[href="#nature3"] {
display:inline-block;
vertical-align:middle;
position:relative;
overflow:hidden;
}
[href="#nature3"]:after {
content:url(http://lorempixel.com/120/80/nature/4);
vertical-align:top;
position:absolute;
}
[href="#nature3"]:hover:after {
left:0;
}
The a:hover + img background works with oldest IE an it keeps the alt attribute useful, this would be my choice. pseudo-element :after/:before works from IE8, but not the ::*after/::*before syntaxe.
theres in css of course, many other solution working with a or img with or without a translucide gif/png :( ....

There are a few approaches you could use. In my opinion, the best one is #1, as it has the broadest browser support and it avoids the use of JS.
1 - You could select just that a (assuming the href is unique), show a background image, and then hide the contained image. You'll also need to specify width, height, anddisplayon thea`:
a[href$='OnlyThisONE'] img {
display: none; /* hide the image that's there */
}
a[href$='OnlyThisONE'] {
background: url(someOtherImage.jpg) /* show another image as a background */
display: inline-block;
height: 100px;
width: 100px;
}
2 - Use content:url(), but it doesn't have broad browser support
- Is it possible to set the equivalent of a src attribute of an img tag in CSS? After running a quick self-check on support of content:url() I would not suggest doing this, at all. I could only get it to work in Chrome. Try it yourself: http://jsfiddle.net/3BRN7/49/
a[href$='OnlyThisONE'] img {
content:url("newImage.jpg");
}
3 - Use JavaScript as you have in your question.

If the src is "random.png", "new.png" will be displayed.
HTML
<a href="#">
<img class="SameClassForAllIMG" src="//dummyimage.com/300x100/111/fff&text=random.png">
<span></span>
</a>
<a href="#">
<img class="SameClassForAllIMG" src="//dummyimage.com/300x100/111/fff&text=images.png">
<span></span>
</a>
CSS
img.SameClassForAllIMG[src*="random.png"] {
display: none;
}
img.SameClassForAllIMG[src*="random.png"] + span {
display: inline-block;
width: 300px;
height: 100px;
background: url(//dummyimage.com/300x100/111/fff&text=new.png) no-repeat left top;
}
I guess that this code is the same as your JavaScript solution.
IE7>= version http://jsfiddle.net/nxvm7/1/
IE8>= version http://jsfiddle.net/nxvm7/2/

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;
}