如何在单击每个文本div时更改图像

-1

我已经实现了一个图像滑块，它可以在按下按钮时更改图像！如何在单击每个文本div时更改图像

现在我想实现当div被点击时发生的图像变化。每个div显示不同的图像。我知道有一个使用Javascript的onclick函数。但是如何实现它。

<!DOCTYPE html> 
    <html> 
    <title>W3.CSS</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
    <body> 

    <h2 class="w3-center">Manual Slideshow</h2> 

    <div class="w3-content w3-display-container" style=" width :939px; 
    height:359px; border: 2px solid black;"> 
    <img class="mySlides" src="C:\wamp64\www\test\My Works\images\1.jpg" 
    style="width:638px;height:355px"> 
    <img class="mySlides" src="C:\wamp64\www\test\My Works\images\2.jpg" 
    style="width:638px;height:355px;"> 

    <div class = "texts"> 

    <div class = "text1" style="width: 298px; height: 127px; border: 1px solid 
    red; text-align: center;padding-top: 26px; position: absolute; right:  
    0px; top:0px;"> Lorem Ipsum Is Lorem Ipsum <br> Lorem Ipsum Is Lorem Ipsum 
    </div> 

    <div class = "text2" style="width: 297px; height: 120px; border: 1px solid 
    red; text-align: center;padding-top: 26px; position: absolute; right:  
    0px; top:127px;"> Lorem Ipsum Is Lorem Ipsum <br> Lorem Ipsum Is Lorem Ipsum 
    </div> 

    <div class = "text3" style="width: 297px; height: 111px; border: 1px solid 
    red; text-align: center;padding-top: 26px; position: absolute; right:  
    0px; top:245px;"> Lorem Ipsum Is Lorem Ipsum <br> Lorem Ipsum Is Lorem Ipsum 
    </div> 

    </div> 



    <button class="w3-button w3-black w3-display-left" 
    onclick="plusDivs(-1)">&#10094;</button> 
    <button class="w3-button w3-black w3-display-right" 
    onclick="plusDivs(1)">&#10095;</button> 
    </div>

来源

2017-04-21 Jackson

为什么你不告诉我们你已经编码？ – lU5er

请[编辑]您的问题以显示相关代码。如果你已经设法实现了一个工作滑块来接受'<' and '>'按钮上的点击，那么你不知道如何做点击事件处理程序吗？ – nnnnnn

在这里粘贴你的代码，使用stackoverflow编辑器的第7个图标来粘贴html，javascript，... – NetVicious

这只能告诉你如何改变形象从按钮TRIGER更改为DIV ID

$("#mybutton").click(function(){ 
 
    $("#img_1").attr('src','https://www.google.com.pk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div><img id="img_1" src='https://www.google.com.pk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'></div> 
 
<button id="mybutton">click me</button>

看到这是工作

来源

2017-04-21 06:51:50

这是实现使用按钮..我需要做的功能，同时点击文本div – Jackson

我已更新我的答案检查，只需从点击功能像$（“。text1”）更改id。click（function（）{}）这就是你想要的 –

因为我不能评论的是，使用code.rider答案，并改变这一行：

$("#mybutton").click(function(){

这个

$("#myDiv").click(function(){

这将告诉jQuery来听取股利，而不是一个按钮点击。

来源

2017-04-21 07:04:49

使用JavaScript，您可以更改img标记的src属性，如div这样的点击。

HTML

<div onclick="changeImage('image1.jpg');">Div one</div> 
<div onclick="changeImage('iamge2.jpg');">Div two</div> 
<img src="" alt="Image" id="myImg">

的Javascript

function changeImage(image){ 
    document.getElementById('myImg').src = image; 
}

，并通过使用JQuery的不喜欢这样。

<div class="one">Div one</div> 
<div class="two">Div two</div> 
<img src="" alt="Image" id="myImg"> 

$('.one').on('click', function(){ 
    $('#myImg').attr('src', 'image1.jpg'); 
}); 
$('.two').on('click', function(){ 
    $('#myImg').attr('src', 'image2.jpg'); 
});

来源

2017-04-21 07:12:32 Maseed

如何在单击每个文本div时更改图像

回答

相关问题