omncr
1
Hello,
I’m a real beginner, i found a lot of answers in the forum (thank you) but i’im really stuck with this specific thing.
I would like the thumbnail to change when we put the mouse on it. I created a blueprint section called cover that i called with
<?= $image = $projet->files()->template('cover')->first(); ?>
<?= $projet->title() ?>
and tried to add java : onmouseover and onmouseout
Written like this the two images appear, the links are ok.
<?= $projet->image()->crop(700,500, 'top left') ?>
<?= $image = $projet->files()->template('cover')->first(); ?>
<?= $projet->title() ?>
Then when i try to add java, image links dont work anymore
<ul class="projets">
<?php foreach ($projs as $projet): ?>
<li>
<a href="<?= $projet->url() ?>">
<img onmouseover="setNewImage()" onmouseout="setOldImage()" id=coverjava src="<?= $projet->image()->crop(700,500, 'top left') ?>">
<br>
<?= $projet->title() ?>
</a>
</li>
<?php endforeach ?>
</ul>
<script>
function setNewImage()
{
document.getElementById('coverjava').src="<?= $image = $projet->files()->template('cover')->first(); ?>"
}
function setOldImage()
{
document.getElementById('coverjava').src="<?= $projet->image()->crop(700,500, 'top left') ?>"
}
</script>
Can somebody help me please?
You are echoing an image tag as src, where you would need the URL, I think:
document.getElementById('coverjava').src="<?= $image = $projet->files()->template('cover')->first()->url(); ?>"
On a side note: The language you are referring to is called JavaScript, Java does exist as well, but is something different.
1 Like
omncr
3
Hello @texnixe
Yes it was that, it worked for the first url :
<img onmouseover="setNewImage()" onmouseout="setOldImage()" id=coverjava src="<?= $projet->image()->crop(700,500, 'top left')->url() ?>">
but i can’t get the url for the cover. When i add the code It displays error on the page.
<?= $image = $projet->files()->template('cover')->first()->url(); ?>
After when I add the url that works on javascript, it shows me the thumbnail of another project. Do you know why?
function setOldImage()
{
document.getElementById('coverjava').src="<?= $projet->image()->crop(700,500, 'top left')->url() ?>";
}
thank you for your time
There are some other issues with your code. For example, you can only ever have one id per page, so using ids in a foreach loop is a no-no, anyway.
Try this:
<ul class="projets">
<?php foreach ($page->children() as $projet) : ?>
<?php if ($image = $projet->image()) : ?>
<li>
<a href="<?= $projet->url() ?>">
<img class="cover" src="<?= $image->crop(700, 500, 'top left')->url() ?>" data-original="<?= $projet->image()->url() ?>">
<?= $projet->title() ?>
</a>
</li>
<?php endif ?>
<?php endforeach ?>
</ul>
<script>
var elements = document.querySelectorAll('.cover');
elements.forEach(function(item) {
const src = item.src;
item.addEventListener('mouseover', function() {
item.src = item.getAttribute('data-original');
});
item.addEventListener('mouseout', function() {
item.src = src;
});
});
</script>
1 Like
