Please help me out (total noob)

Long story short, I don't know anything about coding or web design, but I've been working on a simple portfolio using the Wix website (it makes everything easier for clueless people like me).

Said that, I noticed there's a tool that allows the input of HTML code, and I have few "simple" ideas for my portfolio that could work using HTML (hopefully), so basically, I was wondering if I could tell you guys what I want to do, and perhaps you guys could help me by posting a "sample" working code for the ideas, so I could copy and modify them.

Thank you guys in advance, I'd really appreciate any kind of help!
____________________________________________________________________

Request #1:
A: I want to post an image which upon being clicked redirects you to another website, on the same web browser tab (so it doesn't open a new tab / window).

Request #2:
A: I want to post an image, which upon being clicked changes into another image.
B: Same thing as A, but it works by hovering the mouse over the image besides clicking.

Request #3:
Is this kind of thing possible using only HTLM?
Edit: I seem to be unable to post the link...
____________________________________________________________________

I have plenty of other questions in mind, but those ones should do it for now, I know there are plenty of websites with the same or similar questions, but the codes seem to be different on each website I visit, and since I don't know coding, I barely understand what's going on, that's why I'd really appreciate if you guys could help me out, that way I could post here any questions or problems I may have

 

To toggle images on click:

http://jsfiddle.net/s8qLg7ur/25/

To change images on hover:

http://jsfiddle.net/gd8ba/695/

 

Thank you for the code, it worked perfectly I tried searching Javascript library on Wix, but I couldn't find anything x_x

Excuse me, where does the "CSS" code goes?, because I tried putting it directly into the HTML code and it renders it as plain text D:

I got an out-of-topic question, I was just wondering, is there an easier way to make a web page?, because upon a quick google search I found this "Dreamweaver", I don't know what it exactly is, but it looks like it makes web design easier, does it or not?

 

Find the .css file in your directory and place the css codes there. If you don't have / can't find one just wrap that code in <style></style> and put it right before the html code. So it will look like this:

<style>
#MyImage img:last-child{display:none}
#MyImage:hover img:first-child{display:none}
#MyImage:hover img:last-child{display:inline-block}
</style>


<a id="MyImage" href="http://google.com">
        <img src="https://farm4.staticflickr.com/3041/2942361043_38a9b3d2ec.jpg" />
        <img src="https://lh3.googleusercontent.com/-mx9FmfkZ8AQ/AAAAAAAAAAI/AAAAAAAAABo/L-smk8cBu-g/s640/photo.jpg" />
    </a>

Code (markup):

And

<style>
#NewImage {
  cursor: pointer;
}
</style>

<script>
    function change() {
   var img1 = "https://farm4.staticflickr.com/3041/2942361043_38a9b3d2ec.jpg",
       img2 = "https://lh3.googleusercontent.com/-mx9FmfkZ8AQ/AAAAAAAAAAI/AAAAAAAAABo/L-smk8cBu-g/s640/photo.jpg";
   var imgElement = document.getElementById('NewImage');
 
   imgElement.src = (imgElement.src === img1)? img2 : img1;
}
</script>
<img src="https://farm4.staticflickr.com/3041/2942361043_38a9b3d2ec.jpg" id="NewImage" onclick ="change();"/>

Code (markup):

 

Awesomeeee, thanks a lot for the help!, that alone opened a lot of possibilities for me =)

I was wondering if this effect is possible with just HTML, or if there is a way to put the "JS" code in the HTML, just like you did with the CSS in the post above, or if you have a different work-around to get the same effect I'm open for ideas
Link to effect: codepen (dot) io/ace/pen/BqEer/
(dot) = .
(I had to write the link like that because it isn't letting me post it if I write the link correctly, I don't know why, because you posted two links perfectly fine)

By the way, how can I give you guys likes?, I don't see the button for it, and those posts were really helpful =)

 

You can put that js code in your html / php file. It should work. Make sure it has <script></script> around it.

I am not sure how to make it work the same way (onclick) with just css. We have real brainiacs on DP that can figure out pretty much anything. Just wait, someone else may give you a hand.

I don't think you can give a like yet. You need to be an established member to give likes (you yourself have to have 3 likes from 3 different members).

 

I wrote it this way and it didn't work, what did I do wrong?

<style>
@import "compass/css3";

.before_after_slider {
  position: relative;
  margin: 60px;
  width: 640px;
  height: 400px;
  & > * {
  position: absolute;
  }
}

.black_white {
  overflow: hidden;
}
</style>

<script>
var $black_white = $('.black_white'),
     img_width = $('.black_white img').width(),
     init_split = Math.round(img_width/2);

  $black_white.width(init_split);

     $('.before_after_slider').mousemove(function(e){
     var offX  = (e.offsetX || e.clientX - $black_white.offset().left);
       $black_white.width(offX);
     });

     $('.before_after_slider').mouseleave(function(e){
     $black_white.stop().animate({
     width: init_split
     },1000)
</script>

<div class="before_after_slider">
  <div class="color">
  <img src="http://i.picresize.com/images/2013/04/06/9pX4.png" width="640" height="400" alt="" />
  </div>
  <div class="black_white">
  <img src="http://i.picresize.com/images/2013/04/06/2sJzq.png" width="640" height="400"  alt="black_white" />
  </div>
</div>

Code (markup):

It gives me this output:

Oh I see, at least you know I'm thankful for the help

 

Could someone help me please? =)
I don't know what's wrong in the code from my post above

 

Hi there @sarahk !, yeah sure, here is the link to the code:
http://codepen.io/ace/pen/BqEer/

I'll try to breakdown my problem:

1.- The original code its separated in 3 parts, HTML, CSS, and JS.
2.- The web hosting site that I'm using its Wix, and there's a tool to input HTML code.
3.- The user @qwikad.com was helping me out to figure how to merge the HTML, CSS, and JS in a single HTML code, by using the tags <style> for the CSS, and <script> for the JS, so I can use it on Wix.
4.- I tried to merge the codes into one, but my lack of knowledge is not helping, and I don't know what I'm doing wrong.
5.- I'm asking for help to merge the original code, into a single HTML code , I just don't know how to do it properly.

Thank you!

 

That's sad =(

Well, Wix has 2 apps that does it, both have a free version and a paid version, the problem is the free version is limited to a certain number of images, so I was looking for a work around on how to get it done using the HTML tool.

Excuse me, sorry for bothering you, but could take a look to a new code one last time?, I found another script and upon testing it, it "worked", it basically does what its supposed to do, correctly, but one image is way bigger than the other for some reason, the thing is, both images are 600 x 400 (googled them), I even changed the images and the problem its the same, so I believe there's a problem in the code.

Could you please take a look one last time?, if there's a problem with it that can't be solved, I'll just use the paid version of the app on Wix =)

Original:
http://thenewcode.com/819/A-Before-And-After-Image-Comparison-Slide-Control-in-HTML5

My attempt:
https://jsfiddle.net/ketiasd/gstqdofx/