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.

Change DIV display value using Javascript/Jquery function

Update: Fixed and working. Thanks everyone for the help.
Hello I'm making a javascript/jQuery button that when its clicked, a Div appears (display: inline-block), and when its clicked again the Div goes back to display: none. Ideally I would want to animate the movement, but I really just want to get it working first.
My button...
<button> Menu Test </button>
My function (updated)...
<script>
$("button").click(function(){
$("#flexMenu").toggle("slow", function() {
});
});
</script>
The CSS for flexMenu...
#flexMenu {
/* display: inline-block;*/
position: fixed;
float: left;
background: #1f1f1f;
margin: 3.9em 0 0 0;
padding: .25em;
width: 15%;
height: 6em;
border: 2px solid #fff;
z-index: 100;
}
I'm really just to sure how to grab the display property of the ID and change it. I've done a hover function before using CSS ease-out to make divs grow in size when hovered and change class by using $(this).toggleClass(nameOfClass), but I have never tried just changing an element. The other questions like this didn't really fit just changing the display value. Thanks for any help.

you should use jquery :
$("button").click(function(){
$("#flexMenu").toggle();
});

Updated with the jQuery .on() method which allows you to bind specific events to that button (event listeners).
$("button").on('click', function () {
$('#flexMenu').toggle("slow");
});
Fiddle

Javascript - make popup div open below clicked link

Sorry for the unclear title, I can't formulate a better concise explanation.
I have a list, and within each list item is a link which opens an othersiwse hidden <div> using the following jQuery:
$('a.showreranks').click(function () {
$('body').append('<div class="overlay"></div>');
$('#rerank_details').slideToggle(300);
return false;
});
rerank_details being the id of the div and showreranks being the class of all the links.
This is the CSS of the div:
#rerank_details {
display: none;
background: white;
position: absolute;
border: 1px solid black;
border-radius: 6px;
width: 305px;
padding: 15px;
overflow: hidden;
top: 50%;
left: 50%;
height: 200x;
text-shadow: none;
z-index: 50;
}
So, you see, the opened div is centered when it's opened. It is then populated with info relating to the list item that was clicked but you don't need to worry about that. What I need help with is the following - I don't want the div to be centered on the screen. Instead I'd like it to be positioned right below the link that was clicked. Note that there could be a lot of links on the page, one below the other and the vertical distances could be irregular. How do I accomplish this?

I think that this is what you are trying to do:
http://jsfiddle.net/SO_AMK/r7ZDm/

The answer has already been accepted, but perhaps this is a cleaner version. The animations are all fixed.

if it doesn't have to be within the normal flow of the DOM just use absolute positioning and the event object.
function(event){
var box = //get a handle to box
box.style.position = 'aboslute';
box.style.left = event.page.x;
box.style.top = event.page.y;
}

Javascript show hide css/html/js problem

Some code when I call a showhide method in html is not working correctly. The method shows then hides some html content on this webpage, however, the html or css is not functioning correctly. For example, when the page is loaded in a browser, the space where the div will be shown is just empty space, when there shouldn't be space at all, but when the div is shown it just fills that space. The I think it could be something to do with the css, however I am not to sure. Here is the CSS id I am using to show and hide.
#showAndHide {
text-align: justify;
height: auto;
width: 700px;
margin: auto;
position: relative;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 10px;
visibility: hidden;
}
and here is a small sample of the html that this is being applied to.
<div id="showAndHide">
<div id="physicalAdress">
<div class="h4">
<h4> What is your physical address? </h4>
</div>
<p> Property name (if you have one) </p>
<input type="text" name="propertyName" /><br/>
that html is within the showandhide div, then within a user input div which is:
.userinput {
text-align: justify;
height: auto;
width: 700px;
margin: auto;
position: relative;
border-collapse: collapse;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 10px;
border-right-style: solid;
border-left-style: solid;
}
here is the Javascript method.
function showHideDiv()
{
var divstyle = new String();
divstyle = document.getElementById("showAndHide").style.visibility;
if(document.getElementById("yesPrint").checked == true)
{
document.getElementById("showAndHide").style.visibility = "visible";
}
if(document.getElementById("noPrint").checked == true)
{
document.getElementById("showAndHide").style.visibility = "hidden";
}
}
Basically when I run the page, and show the content the styling is becoming skewed and the positioning of the html that is not with the show and hide content is also becoming skewed.
Any ideas/help would be appreciated.

use display:none instead of visibility: hidden;.
visibility: hidden; reserves space for element

Change visibility:hidden to display:none to prevent the element from taking up space when hidden.
You may need to change your JavaScript slightly, but I can't say for sure as you haven't posted it, but you're going to need something like this:
element.style.display = "block"; //Show the element

function toggle_show(id) {
var el = document.getElementById(id);
if (el && el.style) {
el.style.display = el.style.display == 'none' ? 'block' : 'none';
}
}

http://webdesign.about.com/od/css/f/blfaqhidden.htm
Quoting webdesign:
"visibility: hidden hides the element, but it still takes up space in the layout.
display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code."

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