CODEWITHSUNDEEP
javascripthtmlcss
rifa
rifa

Reputation: 81

Javascript for hiding the image and changing the text is not working

This is my code here:

I want to hide the image when the mouse rolls over and only display text.Then again, when the mouse moves away, the image should be visible. The text property is working just fine but image is having issues. It completely disappears after clicking.

function updated1(element){

document.getElementById("d1").innerHTML = "web deveopment and designing, html css js and bootstrap";
  document.getElementById("d1").style.borderRadius = "4.5%";
document.getElementById("imgd1").style.visibility = 'hidden';

}


function undod1(){
document.getElementById("d1").innerHTML = "WEB DEVELOPMENT";
  document.getElementById("d1").style.borderRadius = "0%";
document.getElementById("imgd1").style.visibility = 'visible';
  
}
#d1 {
  border: 1px solid;
  padding-top: 7px;
  text-align: center;
  box-shadow: 5px 10px #DBE0E3;
  margin-top: 3%;
  color: #FFFFFF;
  width: 350px;
  height: 350px;
  font-size: 40px;
  font-weight: bold;
  line-height: 70px;
  background-color: #DC3D3D;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title> js</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="row">

      <section id="d1" class="col-md-4 col-md-push-4  col-xs-12" onmouseover="updated1(this)" onmouseleave="undod1()">
        <p>WEB DEVELOPMENT
          <p>
            <img id="imgd1" src="https://miro.medium.com/max/1200/1*pE2fOVDikEUwiQJlh4ggzg.jpeg" height="90%" width="90%">

      </section>
    </div>
  </div>
</body>

</html>

LINK TO MY CODE ON CODEPEN IS HERE

Upvotes: 0

Views: 144

Answers (2)

Bulent
Bulent

Reputation: 3411

Your problem is this part

document.getElementById("d1").innerHTML = "...";

Because this code removes all the children from the parent and inserts the text. So basically, when your mouse leaves, there is no image there to make it visible. You don't need that much Javasctipt to create the effect you desire. Better HML, more CSS and less JS:

<section
    id="d1"
    class="col-md-4 col-md-push-4 col-xs-12"
    onmouseover="updated1(this)"
    onmouseleave="undod1()"
>
    <p class="message">WEB DEVELOPMENT<p>
    <img id="imgd1" src="https://miro.medium.com/max/1200/1*pE2fOVDikEUwiQJlh4ggzg.jpeg" height="90%" width="90%">
</section>

#d1:hover {
  border-radius: 4.5%;
}

img {
  opacity: 1
}

#d1:hover img {
  opacity: 0
}

let message = "WEB DEVELOPMENT";
let parent = document.querySelector("#d1");
let item = document.querySelector(".message");
function updated1(element){
  item.innerText = "web deveopment and designing, html css js and bootstrap";
}

function undod1(){
  item.innerText = message;
}

If you try doing something more complex than you asked, try to add/remove classes to change style instead of adding styles in Javascript. This is an easier and cleaner way to change styles.

Upvotes: 1

DCR
DCR

Reputation: 15700

when you set innerHTML you are wiping out your image

function updated1(element){

document.getElementById("d1").innerHTML = "web deveopment and designing, html css js and bootstrap";
  document.getElementById("d1").style.borderRadius = "4.5%";
document.getElementById("imgd1").style.visibility = 'hidden';

}


function undod1(){
document.getElementById("d1").innerHTML = "WEB DEVELOPMENT";
  document.getElementById("d1").style.borderRadius = "0%";
document.getElementById("imgd1").style.visibility = 'visible';
  
}
 .d1{
  border: 1px solid;
  padding-top: 7px;
  text-align: center;
  box-shadow: 5px 10px #DBE0E3;
  margin-top: 3%;
  color: #FFFFFF;
  width: 350px;
  height: 350px;
  font-size: 40px;
  font-weight: bold;
  line-height: 70px;
  background-color: #DC3D3D;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title> js</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="row">

      <section class="d1" class="col-md-4 col-md-push-4  col-xs-12" onmouseover="updated1(this)" onmouseleave="undod1()">
        <p id='d1'>WEB DEVELOPMENT</p>
          
            <img id="imgd1" src="https://miro.medium.com/max/1200/1*pE2fOVDikEUwiQJlh4ggzg.jpeg"  width="90%">
       
      </section>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Related Questions