Overwrite one image over the other with href="#image"

Asked

Viewed 938 times

0

Quero usar as ABAS da imagem como href e uma sobrepor a outra por cima

Well, better example than that than what I want to do I think there isn’t ? I want to use the image tab as a link, when the person clicks on the "Loguin" tab will appear the other image on top , will hide the input "text" (which in the case of the registrar would be Email and Password and a button Submit [OK]) from there after hiding the input and changing the image, will appear the input "text" of Loguin (Password User and the button Submit) in the same occupied space ...

I could understand right ? is 2 image with input and Ubmit, only when you click on the tab they change and occupy the same space.... that’s it...

Edit : well my problem still continues haha, now when I click on the tab the second image appears below, as the example below

https://ghostbin.com/paste/w7ysq

Example of the code, I added the js link, I put the script inside the head of html , but not yet done what I want exactly... I want to make a Menu Mobile, the person will click on an icon in the upper left corner of the screen and will appear this div then I want the tabs to be alternated with the click where written Loguin(enter) and Register(register) I used the map to mark the location of the clicks already, only it doesn’t alternate, when I click on Loguin the second image appears below

quero uma imagem alternando entre uma e outra[2]

javascript html css div

  • This can be done via JS. The PHP tag is unnecessary. The answer also depends on whether you are using a framework like jQuery or not. This page shows how to do this in JS only: https://www.w3schools.com/howto/howto_js_tabs.asp Obs. You can translate LOGIN as authentication, login, access, etc, but LOGUIN does not give!

  • worse... kkkk vo change loguin Log in , I’ll read a link, if I can put down here the example of JS and html

  • It uses the <button>name</button> I want a Href="#Login" and one for Href="#Register" using <map> with my coordinates that will be right on top of Login/Register</map> this example that you send, is like making a menu and loading div dynamically, and to do with image using MAP and HREF ? same thing ? I have no course with HTML and CSS or JS , everything I know I learn on Net msm :/

1 answer

0


In this case, the easiest way is to use an external library such as jQuery. The following link shows you the jQuery page specific for creating tabs: https://jqueryui.com/tabs/

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#tabs" ).tabs();
  } );
  </script>
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
</div>   
</body>
</html>

Note how simple javascript code is using the library.

  • help me understand , the problem I use image tabs, with mapped <map> link is a mobile access menu I want to do(there will be an icon, then the person clicks on the icon and there is a div made with css and such cute the size of the image that I used as an example , but when I click to see the second image, it appears below, I want the 2 change in the same space, one of the show type, and the other , I just don’t know how to do it

  • Only there’s another stop. Don’t take it personally, but that’s not what you asked upstairs. As I understand this site, it is not a forum with endless discussions that we know where they begin but not where they will end and the issues will change. It is very important to maintain focus and objectivity. If I answered your original question, you should accept it (as you already did) and with the doubts that have arisen, you ask a new question, including using the code. This way, not only you but the whole community will be helped. Maybe, take the part that started with EDIT: and create the new one from there.

Browser other questions tagged javascript html css div

You are not signed in. Login or sign up in order to post.