0

I've been fiddling around with this all morning, as I'm very new to JS I'm not getting very far. I felt it would be better to start from scratch on here.

I'm wanting to switch the image when the button is on hover. The current image is: http://via.placeholder.com/350x150, and we could change to: http://via.placeholder.com/200x100

EDIT: I didn't realise you could do this in pure CSS. I will do my research, although any examples doing the css route would be appreciated.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js" integrity="sha384-feJI7QwhOS+hwpX2zkaeJQjeiwlhOP+SdQDqhgvvo1DsjtiSQByFdThsxO669S2D" crossorigin="anonymous"></script>


<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h1>Testing image hover</h1>
<p class="mt-3">Just a test... just a test...</p>

<button class="btn btn-success btn-lg">Test button</button>
</div>

<div class="col-md-6">
<img style="display: width:100vh; height: 90vh;" src="http://via.placeholder.com/350x150">

</div>
</div>
</div>
</body>
JackN
  • 17
  • 2
  • 8
  • Where is your javascript? – jmargolisvt Mar 27 '18 at 14:30
  • 1
    Is there a reason why you want to do this in JavaScript to begin with? CSS offers you this functionality without a single line of JS. – Glubus Mar 27 '18 at 14:30
  • 1) You're missing the reference to jquery.js which Bootstrap relies on 2) you've not included any of your actual JS code in the question...? 3) CSS would be far more appropriate (and perform better) for this task – Rory McCrossan Mar 27 '18 at 14:31
  • You can do it in CSS??!!?!?!? Sorry, I just assumed JS would be required. I will edit my question. – JackN Mar 27 '18 at 14:34
  • and please read ALL the answers before complaining it's not what you are looking for (consider also the related links) – Temani Afif Mar 27 '18 at 14:39
  • 1. The duplicate you're referring to isn't a duplicate. It's changing a src when hovering over that src. I'm asking about when hovering over a different element. 2. Never did I complain? 3. I didn't know you could do with CSS. CSS is my preference, so it wouldn't make sense to then add jQuery after I've found this out. – JackN Mar 27 '18 at 14:41
  • as i said, read carefully, i added 3 duplicates ;) – Temani Afif Mar 27 '18 at 14:42
  • Convinced the third duplicate wasn't there beforehand. Either way, by the looks of it, it does answer my question. I apologise, and thank you for pointing me in the right direction. To clarify for future reference, last "duplicate" answers the question perfectly. – JackN Mar 27 '18 at 14:46
  • `Convinced the third duplicate wasn't there beforehand.` --> because i can only add one to start, then i have to edit to add more – Temani Afif Mar 27 '18 at 14:48

0 Answers0