Not the Best, Please Help :D (Html help)

Discussion in 'Spigot Help' started by korbynullvig, May 26, 2017.

  1. Hello, So im not the best at Html i tried making it so when i hover over an icon it will show another picture
    but instead it duplicates it to the side please help
    im trying to make it like this http://www.grandtheftmc.net
    When you hover over the icons it changes pictures

    Code (Text):
    I tried adding this

    <img src="images/icon-4-hover.png" alt="Icon Hover">

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Minecraft Template</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cookie">
    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="stylesheet" href="assets/css/Pretty-Footer.css">
    </head>

    <body>
    <div class="navigation">
    <nav class="navbar navbar-default">
    <div class="container-fluid">
    <div class="navbar-header">
    <a class="navbar-brand navbar-link" href="#"><img src="assets/img/logo.png" class="nav-logo">OrbitalMC </a>
    <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    </div>
    <div class="collapse navbar-collapse" id="navcol-1">
    <ul class="nav navbar-nav navbar-right">
    <li role="presentation"><a href="#forums" class="href">Forums </a></li>
    <li role="presentation"><a href="#vote" class="href">Vote </a></li>
    <li role="presentation"><a href="#bans" class="href">Bans </a></li>
    <li role="presentation"><a href="#shop" class="href">Shop </a></li>
    </ul>
    </div>
    </div>
    </nav>
    </div>
    <div><img src="assets/img/logo.png" class="logo" href="index.html"></div>
    <div class="image-nav">
    <div class="image-menus">
    <a href="#" class="image-link"> <img src="assets/img/enchanting-book.png"></a>
    <h1>Forums </h1></div>
    <div class="image-menus">
    <a href="index.html" class="image-link"> <img src="assets/img/ruby-ruby.png"></a>
    <h1>Vote </h1></div>
    <div class="image-menus">
    <a href="index.html" class="image-link"> <img src="assets/img/uban-icon.png"></a>
    <h1>Bans </h1></div>
    <div class="image-menus">
    <a href="index.html" class="image-link"> <img src="assets/img/epic-chest.png"></a>
    <h1>Shop </h1></div>
    </div>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    </body>

    </html>
     
  2. Cheapest method via some nasty javascript:

    <img src="YOUR_FIRST_IMG" alt="Avatar" class="image" onmouseover="this.src='YOUR_SECOND_IMG'" onmouseout="this.src='YOUR_FIRST_IMG'">