[英]how do I write the function for getting different background image and text upon clicking its designated button?
I am aware of the script that calls the text according to its button, but I have no clue how I can place a background image on that text.我知道根据其按钮调用文本的脚本,但我不知道如何在该文本上放置背景图像。 My plan is that the background image can also change according to the button that was clicked.我的计划是背景图像也可以根据单击的按钮进行更改。 Here is what I've done so far...这是我到目前为止所做的......
This is actually for a school project and I want it to be as action-oriented or somewhat interactive in a way with just functions and methods.这实际上是针对学校项目的,我希望它以行动为导向或以某种方式与功能和方法互动。 I also wanted to add another cell table and just place an image there with some texts just like a gaming avatar profile.我还想添加另一个单元格表,并在其中放置一个带有一些文本的图像,就像游戏头像配置文件一样。
function myFunction(elem) { var x = document.getElementById("js-description"); var description = elem.getAttribute('data-description'); x.innerHTML = description; var button = document.getElementsByClassName('js-button'); for (var i = 0; i < button.length; i++) { button[i].classList.remove('active-buton'); } elem.classList.add('active-button'); }
body, html { height: 100%; background-color: #190a48; margin: 0; }.btn-group button { font-family: SF; letter-spacing: 5px; background-color: transparent; /* Green background */ border: 1px solid #504c7c; /* Green border */ color: white; /* White text */ padding: 2.5% 1%; /* Some padding */ cursor: pointer; /* Pointer/hand icon */ width: 15vw; height: 6vw; /* Set a width if needed */ display: block; /* Make the buttons appear below each other */ margin-left: 20%; border-radius: 4%; -webkit-box-shadow: inset 1px 6px 12px #544e88, inset -1px -10px 5px #2e2d3a, 1px 2px 1px #2e2d3a; -moz-box-shadow: inset 1px 6px 12px #544e88, inset -1px -10px 5px #2e2d3a, 1px 2px 1px #2e2d3a; box-shadow: inset 1px 6px 12px #544e88, inset -1px -10px 5px #2e2d3a, 1px 2px 1px #2e2d3a; font-size: 1vw; }.btn-group button:not(:last-child) { border-bottom: none; /* Prevent double borders */ }.active-button:hover { background-color: #83a1a7; }.description { text-align: center; color: white; font-size: 50px; font-family: St; letter-spacing: 3px; }
<table> <tr> <td rowspan="2" width=1000px; style="border: 7px solid #040434;"> <div id="js-description" class="description"> </div> </td> </tr> <tr> <td rowspan="4" height=450px; class="imgxbtn" style="transparent;"> <div class="js-button btn-group"> <button data-description="Vivamus, moriendum est" onclick="myFunction(this)"> HOBBY </button> <button data-description="Forsan et haec olim meminisse iuvabit" onclick="myFunction(this)"> MEMORY </button> <button data-description="Sapere aude" onclick="myFunction(this)"> CONQUEST </button> <button data-description="Audentes fortuna iuvat" onclick="myFunction(this)"> AMBITION </button> <button data-description="Ad astra per aspera" onclick="myFunction(this)"> TARGET </button> </div> </td> </tr> <tr> <td rowspan="3" height=250px; style="border: 5px solid #040434; opacity:35%; background-color: #9a5eaa;">content</td> </tr> <tr> </tr> </table>
You are almost there.你快到了。 You can use the same aproach for the background image as you already do for the description text.您可以对背景图像使用与描述文本相同的方法。 Just define another data-attribute with your image-url and set the respective CSS property like this:只需使用您的图像 url 定义另一个数据属性并设置相应的 CSS 属性,如下所示:
function onButtonClick() { var descriptionElement = document.getElementById("description"); descriptionElement.innerHTML = event.target.dataset.description; descriptionElement.style['background-image'] = event.target.dataset.backgroundImage; }
<div id="description">Press one of the buttons below.</div> <button data-description="First description" data-background-image="linear-gradient(red, orange)" onclick="onButtonClick()">first</button> <button data-description="Second description" data-background-image="linear-gradient(teal, green)" onclick="onButtonClick()">second</button>
I use gradients here because I don't have an image at hand.我在这里使用渐变,因为我手头没有图像。 To use an actual image you can specify it like data-background-image="url('path/to/your/image')"
.要使用实际图像,您可以将其指定为data-background-image="url('path/to/your/image')"
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.