What's new
By:

🔒 Closed Change html to image jquery

Status
Not open for further replies.
eto po yung code pa try naman po kung gagana sa inyo



Code: 
<!DOCTYPE html>
<html lang="en">
<head>
<title>ArisSongalia</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
                
                $(function() {
      $("#home").click(function() {
        $("#main").html("<p>This website is made for an activity for my computer programing class in Nov 12, 2020.<br><br>The goal of this activity is to demonstrate the use of jquery library in a form of a website along with CSS, Javascript and Html.<p>");
        $("#main1").html("<h3>Home</h>");
      });
    });
    
    $(function() {
      $("#aboutMe").click(function() {
        $("#main").html("My name is Aris Songalia I live in San Nicolas III, Bacoor Cavite City and currently studying programing in SHS San Nicolas and is interested in programing and making arts.<br><br> There's not much of things I do in my free time I usually do stay in my house, be in peace and do the things i want to. I prefer staying home rather than going outside infact im a very lazy and quiet person but I am thoughtful and affectionate about the things I love." );
        $("#main1").html("<h3>About Me</h>");
      });
    });
    
   $(function() {
      $("#gallery").click(function() {
        $("#main").html("New content" );
      });
    });

    
    $(function() {
      $("#portfolio").click(function() {
        $("#main").html("New content" );
      });
    });
    
    $(function() {
      $("#contactMe").click(function() {
        $("#main").html("New content" );
      });
    });
</script>

<link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="header">
  <h1>Aris Songalia</h1>
  <p>My Personal Website.</p>
</div>

<div class="topnav">
  <p id="home">Home</p>
  <p id="aboutMe">AboutMe</p>
  <p id="gallery"">Gallery</p>
  <p id="portfolio">Portfolio</p>
  <p id="contactMe">ContactMe</p>
</div>


<div class="row">
  <div class="column middle">
    <h2 id="main1">Home</h2>
    <p id="main">This website is made for an activity for my computer programing class in Nov 12, 2020.<br><br>The goal of this activity is to demonstrate the use of jquery library in a form of a website along with CSS, Javascript and Html.</p>
 
  </div>
 
  <div class="column side">
    
    <h4>“People tend to dwell more on negative things than on good things. So the mind then becomes obsessed with negative things, with judgments, guilt and anxiety produced by thoughts about the future and so on.” <br><br>– Eckhart Tolle</h>
  </div><!-- end column div-->
</div> <!-- end row div -->
 
</body>
</html>
 
Need extension ng src mo ang nakalagay is imagedir dat image.jpg or kung ano man extension nun

Mali pag lagay mo ng image try mo ganto
JavaScript: 
var img = $('<img />', {
  id: 'Myid',
  src: 'image.jpg',
  alt: 'MyAlt'
});
img.appendTo($('#YourDiv'));
 
Hi po eto yung ginawa ko tama po ba to?

Code: 
var img = $('<img />', {
  id: 'Myid',
  src: './img/pic1.jpg',
  alt: 'MyAlt'
  });
  img.appendTo($('#main'));
    
   $(function() {
      $("#portfolio").click(function() {
        $("#main").html(img);
      });
    });
 
SUNRAI said:
Hi po eto yung ginawa ko tama po ba to?

Code: 
var img = $('<img />', {
  id: 'Myid',
  src: './img/pic1.jpg',
  alt: 'MyAlt'
  });
  img.appendTo($('#main'));
  
   $(function() {
      $("#portfolio").click(function() {
        $("#main").html(img);
      });
    });
Click to expand...
mali lagay mo sa loob ng onclick
 
Status
Not open for further replies.

Similar threads

About this Thread

  • 9
    Replies
  • 317
    Views
  • 3
    Participants
Last reply from:
SUNRAI

New Topics

Trending Topics

Online now

Members online
925
Guests online
791
Total visitors
1,716

Forum statistics

Threads
2,276,317
Posts
28,969,104
Members
1,231,208
Latest member
phcFREDOMA
Back
Top