1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Please help me out (total noob)

Discussion in 'HTML & Website Design' started by ketiasd, Apr 18, 2017.

  1. #1
    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).
    SEMrush
    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 :D
     
    ketiasd, Apr 18, 2017 IP
    SEMrush
  2. sarahk

    sarahk iTamer Staff

    Messages:
    25,403
    Likes Received:
    3,499
    Best Answers:
    101
    Trophy Points:
    665
    #2
    for the image you just need something like this
    <a href='http://myfriendsawesomesite.com'><img src='http://myfriendsawesomesite.com/images/logo.png'></a>
    Code (markup):
    the second one is a bit trickier and I'd try to do that using the javascript library that wix use. Essentially you'd create an array of images and loop through the lists of images replacing the "src" everytime the user clicks

    javascript can detect hovers or mouseovers - but you might want to use a timeout function to slow the rate of change

    #1 is pure html
    #2 could be done using css rather than javascript if there was only one image to change to. Used to be common in the old days when menus changed colour when you put your mouse over them. Don't be afraid of css and javascript though. Most people (99.9%) have it turned on and it won't slow your page down.

    Back in the day it used to be easy to peek into a website's source and see what they're doing. Simpler on some sites but not in others. The more a site tries to be admin friendly the more complex the front end code seems to be.
     
    sarahk, Apr 18, 2017 IP
  3. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,045
    Likes Received:
    1,152
    Best Answers:
    22
    Trophy Points:
    400
    #3
    qwikad.com, Apr 18, 2017 IP
  4. ketiasd

    ketiasd Peon

    Messages:
    7
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #4
    Thank you for the code, it worked perfectly :D 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?
     
    ketiasd, Apr 18, 2017 IP
  5. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,045
    Likes Received:
    1,152
    Best Answers:
    22
    Trophy Points:
    400
    #5
    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):
     
    qwikad.com, Apr 18, 2017 IP
  6. ketiasd

    ketiasd Peon

    Messages:
    7
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #6
    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 =)
     
    ketiasd, Apr 18, 2017 IP
    qwikad.com likes this.
  7. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,045
    Likes Received:
    1,152
    Best Answers:
    22
    Trophy Points:
    400
    #7
    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).


     
    qwikad.com, Apr 18, 2017 IP
  8. ketiasd

    ketiasd Peon

    Messages:
    7
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #8
    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:
    [​IMG]

    Oh I see, at least you know I'm thankful for the help :D
     
    Last edited: Apr 18, 2017
    ketiasd, Apr 18, 2017 IP
  9. ketiasd

    ketiasd Peon

    Messages:
    7
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #9
    Could someone help me please? =)
    I don't know what's wrong in the code from my post above
     
    ketiasd, Apr 19, 2017 IP
  10. sarahk

    sarahk iTamer Staff

    Messages:
    25,403
    Likes Received:
    3,499
    Best Answers:
    101
    Trophy Points:
    665
    #10
    I just put it into a fiddle - https://jsfiddle.net/gye28jtr/

    I've just done a search on before_after_slider and finally worked out what you are trying to do. You aren't linking to the javascript library and without knowing which version of the before & after script you are trying to use we can't really help.

    Can you show us where you got the script from?
     
    sarahk, Apr 19, 2017 IP
  11. ketiasd

    ketiasd Peon

    Messages:
    7
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #11
    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!
     
    Last edited: Apr 19, 2017
    ketiasd, Apr 19, 2017 IP
  12. sarahk

    sarahk iTamer Staff

    Messages:
    25,403
    Likes Received:
    3,499
    Best Answers:
    101
    Trophy Points:
    665
    #12
    I don't like telling people to start over but that before and after script has a couple of problems
    1. uses jquery - easy to convert to old school javascript though
    2. uses the css library from http://compass-style.org/ and it appears that it is some sort of ruby on rails thing that you need to install on your server - it's highly unlikely that wix will have it preinstalled and they won't install it for you.
    I've had a few people insist on wix/weebly/etc because it's so easy to create things - are you sure that there isn't a standard wix module to do this?
    If there isn't you may have to make some tough decisions about how badly you need that functionality to meet your objectives. If you have to have it then you need to find another library that offers it - google showed up plenty - and you may need to buy a domain, pay for hosting and get a proper website.
     
    sarahk, Apr 20, 2017 IP
  13. ketiasd

    ketiasd Peon

    Messages:
    7
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #13
    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/
     
    ketiasd, Apr 20, 2017 IP