Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.
Course Of The Month
4 days, 1 hour left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
CSS onclick, how to workaround
Posted on 2013-11-05
Hello.
Im trying to archive zooming an image when clicking it. Im using this CSS to make it Work:
The code above Works just GREAT..... But what if you wanted it to zoom when clicking and zoom out when clicking Again? The CSS :active selector wont do it, cause it only Works when you hold down the mouse.
There is alot tutorials for how you can change CSS with a onclick event, but still this cant do it, while i need it to transform when clicking. And Again transform back when clicking Again.
I also tried to look into using checkboxes for this purpose, but it cant help as long as CSS is missing an onclick function.
You can see my page here: http://www.mikethk.dk/ the right DK map will tranform when hovering. But i cant figure out how to make it Work with a click on the image.
Can i somehow cheat the system to think im CSS :active constantly after clicking the image, until i click it Again?
Maybe java can hold CSS :active after a click?
Im trying to archive zooming an image when clicking it. Im using this CSS to make it Work:
.lort img{
-webkit-transition: all 1.3s;
}
.lort:hover img{
-webkit-transform:scale(1.3);
}
The code above Works just GREAT..... But what if you wanted it to zoom when clicking and zoom out when clicking Again? The CSS :active selector wont do it, cause it only Works when you hold down the mouse.
There is alot tutorials for how you can change CSS with a onclick event, but still this cant do it, while i need it to transform when clicking. And Again transform back when clicking Again.
I also tried to look into using checkboxes for this purpose, but it cant help as long as CSS is missing an onclick function.
You can see my page here: http://www.mikethk.dk/ the right DK map will tranform when hovering. But i cant figure out how to make it Work with a click on the image.
Can i somehow cheat the system to think im CSS :active constantly after clicking the image, until i click it Again?
Maybe java can hold CSS :active after a click?
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
-
4
3
7 Comments
Active 3 days ago
Easy in jQuery:
Click an image and it will add a class, click it again and it will remove the class. Just style the classes using CSS
$('img').toggleClass('clicked');
Click an image and it will add a class, click it again and it will remove the class. Just style the classes using CSS
See this code:
And PHP
And CSS:
It wont Work, im properly missunderstanding something.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Oplevelser</title>
<link rel="stylesheet" type="text/css" href="moselort.css">
<link rel="stylesheet" type="text/css" href="design-button.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("test_img").click(function(){
$("test_img").toggleClass("test_img1");
});
});
</script>
</head>
And PHP
<td colspan="2">
<img class="test_img" src="image.php?_nr=<?php echo $row['_nr']; ?>" style="width: 300px; height: 168px;" />
</td>
And CSS:
.test_img {
-webkit-transition: all 1.3s;
-moz-transition: all 1.3s;
-ms-transition: all 1.3s;
}
.test_img1 {
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
-ms-transform:scale(1.3);
}
It wont Work, im properly missunderstanding something.
Active 3 days ago
OK. If you're using a class selector for your jQuery, you need to include the period. You should also use $(this) inside the function to refer to the image that received the click(). I would use an appropriate classname (such as zoomed) as well, but that's just personal choice.
Set up your jQuery like this:
Set up your jQuery like this:
$(document).ready(function(){
$(".test_img").click(function(){
$(this).toggleClass("zoomed");
});
});
.test_img {
-webkit-transition: all 1.3s;
-moz-transition: all 1.3s;
-ms-transition: all 1.3s;
}
.zoomed {
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
-ms-transform:scale(1.3);
}
So i tested with this and it worked. BUT.
I got some files. . . index.php, global.js, name.php, moselort.css
The image that wont Work as toggle and to be toggled is one in the name.php file which is called by global.js
Here is name.php with the img class="shit" near bot.
It is kinda just copy/paste. Ofcourse i changed it to img.shit in the script. It is like it wont cross files. Sry about me might being noobies here.
<script>
$(document).ready(function(){
$("img.lort").click(function(){
$(this).toggleClass("zoomed");
});
});
</script>
<div >
<img class="lort" src="images/grongron_dk.png" alt="asdasd" >
</div>
.lort.img {
-webkit-transition: all 1.3s;
-moz-transition: all 1.3s;
-ms-transition: all 1.3s;
}
.zoomed{
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
-ms-transform:scale(1.3);
}
I got some files. . . index.php, global.js, name.php, moselort.css
The image that wont Work as toggle and to be toggled is one in the name.php file which is called by global.js
Here is name.php with the img class="shit" near bot.
<?php
require 'connect.php';
$er_region_syddanmark = $_POST['v_region_syddanmark'];
$er_region_sjaelland = $_POST['v_region_sjaelland'];
$er_region_midtjylland = $_POST['v_region_midtjylland'];
$er_region_hovedstaden = $_POST['v_region_hovedstaden'];
$er_region_nordjylland = $_POST['v_region_nordjylland'];
if ($er_region_syddanmark == syddanmark) {
$valgt_region = syddanmark;
}
if ($er_region_sjaelland == sjaelland) {
$valgt_region = sjaelland;
}
if ($er_region_midtjylland == midtjylland) {
$valgt_region = midtjylland;
}
if ($er_region_hovedstaden == hovedstaden) {
$valgt_region = hovedstaden;
}
if ($er_region_nordjylland == nordjylland) {
$valgt_region = nordjylland;
}
$valgt_helsingor = $_POST['v_helsingor'];
$valgt_gribskov = $_POST['v_gribskov'];
$valgt_halsnaes = $_POST['v_halsnaes'];
$valgt_fredensborg = $_POST['v_fredensborg'];
$valgt_hillerod = $_POST['v_hillerod'];
$valgt_frederikssund = $_POST['v_frederikssund'];
$valgt_allerod = $_POST['v_allerod'];
$valgt_horsholm = $_POST['v_horsholm'];
$valgt_rudersdal = $_POST['v_rudersdal'];
$valgt_fureso = $_POST['v_fureso'];
$valgt_egedal = $_POST['v_egedal'];
$valgt_ballerup = $_POST['v_ballerup'];
$valgt_herlev = $_POST['v_herlev'];
$valgt_gladsaxe = $_POST['v_gladsaxe'];
$valgt_lyngby_taarnbaek = $_POST['v_lyngby_taarnbaek'];
$valgt_gentofte = $_POST['v_gentofte'];
$valgt_kbh = $_POST['v_kbh'];
$valgt_frederiksberg = $_POST['v_frederiksberg'];
$valgt_rodovre = $_POST['v_rodovre'];
$valgt_glostrup = $_POST['v_glostrup'];
$valgt_albertslund = $_POST['v_albertslund'];
$valgt_hoje_taastrup = $_POST['v_hoje_taastrup'];
$valgt_ishoj = $_POST['v_ishoj'];
$valgt_bornholm = $_POST['v_bornholm'];
$valgt_vallensbaek = $_POST['v_vallensbaek'];
$valgt_brondby = $_POST['v_brondby'];
$valgt_hvidovre = $_POST['v_hvidovre'];
$valgt_taarnby = $_POST['v_taarnby'];
$valgt_dragor = $_POST['v_dragor'];
$valgt_assens = $_POST['v_assens']; //De kommuner som herunder er valgt i html filen, vil hedde kommunens navn i variablen. Eks. er Svendborg markeret i html filen, s¿il $valgt_svendborg v¿ "svendborg".
$valgt_billund = $_POST['v_billund'];
$valgt_esbjerg = $_POST['v_esbjerg'];
$valgt_fano = $_POST['v_fano'];
$valgt_fredericia = $_POST['v_fredericia'];
$valgt_faaborgmidtfyn = $_POST['v_faaborgmidtfyn'];
$valgt_haderslev = $_POST['v_haderslev'];
$valgt_hedensted = $_POST['v_hedensted'];
$valgt_horsens = $_POST['v_horsens'];
$valgt_kerteminde = $_POST['v_kerteminde'];
$valgt_kolding = $_POST['v_kolding'];
$valgt_langeland = $_POST['v_langeland'];
$valgt_middelfart = $_POST['v_middelfart'];
$valgt_nordfyn = $_POST['v_nordfyn'];
$valgt_nyborg = $_POST['v_nyborg'];
$valgt_odense = $_POST['v_odense'];
$valgt_svendborg = $_POST['v_svendborg'];
$valgt_sonderborg = $_POST['v_sonderborg'];
$valgt_tonder = $_POST['v_tonder'];
$valgt_varde = $_POST['v_varde'];
$valgt_vejen = $_POST['v_vejen'];
$valgt_vejle = $_POST['v_vejle'];
$valgt_aero = $_POST['v_aero'];
$valgt_aabenraa = $_POST['v_aabenraa'];
$valgt_faxe = $_POST['v_faxe'];
$valgt_greve = $_POST['v_greve'];
$valgt_guldborgsund = $_POST['v_guldborgsund'];
$valgt_holbaek = $_POST['v_holbaek'];
$valgt_kalundborg = $_POST['v_kalundborg'];
$valgt_koge = $_POST['v_koge'];
$valgt_lejre = $_POST['v_lejre'];
$valgt_lolland = $_POST['v_lolland'];
$valgt_naestved = $_POST['v_naestved'];
$valgt_odsherred = $_POST['v_odsherred'];
$valgt_ringsted = $_POST['v_ringsted'];
$valgt_roskilde = $_POST['v_roskilde'];
$valgt_slagelse = $_POST['v_slagelse'];
$valgt_solrod = $_POST['v_solrod'];
$valgt_soro = $_POST['v_soro'];
$valgt_stevns = $_POST['v_stevns'];
$valgt_vordingborg = $_POST['v_vordingborg'];
$valgt_favrskov = $_POST['v_favrskov'];
$valgt_herning = $_POST['v_herning'];
$valgt_hedensted = $_POST['v_hedensted'];
$valgt_horsens = $_POST['v_horsens'];
$valgt_holsterbro = $_POST['v_holsterbro'];
$valgt_ikast_brande = $_POST['v_ikast_brande'];
$valgt_lemvig = $_POST['v_lemvig'];
$valgt_norddjurs = $_POST['v_norddjurs'];
$valgt_odder = $_POST['v_odder'];
$valgt_randers = $_POST['v_randers'];
$valgt_ringkobing_skjern = $_POST['v_ringkobing_skjern'];
$valgt_samso = $_POST['v_samso'];
$valgt_silkeborg = $_POST['v_silkeborg'];
$valgt_skanderborg = $_POST['v_skanderborg'];
$valgt_skive = $_POST['v_skive'];
$valgt_struer = $_POST['v_struer'];
$valgt_syddjurs = $_POST['v_syddjurs'];
$valgt_viborg = $_POST['v_viborg'];
$valgt_aarhus = $_POST['v_aarhus'];
$valgt_bronderslev_dronninglund = $_POST['v_bronderslev_dronninglund'];
$valgt_frederikshavn = $_POST['v_frederikshavn'];
$valgt_hjorring = $_POST['v_hjorring'];
$valgt_jammerbugt = $_POST['v_jammerbugt'];
$valgt_laeso = $_POST['v_laeso'];
$valgt_mariager_fjord = $_POST['v_mariager_fjord'];
$valgt_morso = $_POST['v_morso'];
$valgt_rebild = $_POST['v_rebild'];
$valgt_thisted = $_POST['v_thisted'];
$valgt_vesthimmerland = $_POST['v_vesthimmerland'];
$valgt_aalborg = $_POST['v_aalborg'];
$query = "SELECT * FROM danmark WHERE _region = '$valgt_region'
AND (_kommune = '$valgt_assens' OR _kommune = '$valgt_billund' OR _kommune = '$valgt_esbjerg' OR _kommune = '$valgt_fano' OR _kommune = '$valgt_fredericia' OR _kommune = '$valgt_faaborgmidtfyn' OR _kommune = '$valgt_haderslev' OR _kommune = '$valgt_hedensted' OR _kommune = '$valgt_horsens' OR _kommune = '$valgt_kerteminde' OR _kommune = '$valgt_kolding' OR _kommune = '$valgt_langeland' OR _kommune = '$valgt_middelfart' OR _kommune = '$valgt_nordfyn' OR _kommune = '$valgt_nyborg' OR _kommune = '$valgt_odense' OR _kommune = '$valgt_svendborg' OR _kommune = '$valgt_sonderborg' OR _kommune = '$valgt_tonder' OR _kommune = '$valgt_varde' OR _kommune = '$valgt_vejen' OR _kommune = '$valgt_vejle' OR _kommune = '$valgt_aero' OR _kommune = '$valgt_aabenraa'
OR _kommune = '$valgt_faxe' OR _kommune = '$valgt_greve' OR _kommune = '$valgt_guldborgsund' OR _kommune = '$valgt_holbaek' OR _kommune = '$valgt_kalundborg' OR _kommune = '$valgt_koge' OR _kommune = '$valgt_lejre' OR _kommune = '$valgt_lolland' OR _kommune = '$valgt_naestved' OR _kommune = '$valgt_odsherred' OR _kommune = '$valgt_ringsted' OR _kommune = '$valgt_roskilde' OR _kommune = '$valgt_slagelse' OR _kommune = '$valgt_solrod' OR _kommune = '$valgt_soro' OR _kommune = '$valgt_stevns' OR _kommune = '$valgt_vordingborg'
OR _kommune = '$valgt_favrskov' OR _kommune = '$valgt_herning' OR _kommune = '$valgt_hedensted' OR _kommune = '$valgt_horsens' OR _kommune = '$valgt_holsterbro' OR _kommune = '$valgt_ikast_brande' OR _kommune = '$valgt_lemvig' OR _kommune = '$valgt_norddjurs' OR _kommune = '$valgt_odder' OR _kommune = '$valgt_randers' OR _kommune = '$valgt_ringkobing_skjern' OR _kommune = '$valgt_samso' OR _kommune = '$valgt_silkeborg' OR _kommune = '$valgt_skanderborg' OR _kommune = '$valgt_skive' OR _kommune = '$valgt_struer' OR _kommune = '$valgt_syddjurs' OR _kommune = '$valgt_viborg' OR _kommune = '$valgt_aarhus'
OR _kommune = '$valgt_bronderslev_dronninglund' OR _kommune = '$valgt_frederikshavn' OR _kommune = '$valgt_hjorring' OR _kommune = '$valgt_jammerbugt' OR _kommune = '$valgt_laeso' OR _kommune = '$valgt_mariager_fjord' OR _kommune = '$valgt_morso' OR _kommune = '$valgt_rebild' OR _kommune = '$valgt_thisted' OR _kommune = '$valgt_vesthimmerland' OR _kommune = '$valgt_aalborg'
OR _kommune = '$valgt_helsingor' OR _kommune = '$valgt_gribskov' OR _kommune = '$valgt_halsnaes' OR _kommune = '$valgt_fredensborg' OR _kommune = '$valgt_hillerod' OR _kommune = '$valgt_frederikssund' OR _kommune = '$valgt_allerod' OR _kommune = '$valgt_horsholm' OR _kommune = '$valgt_rudersdal' OR _kommune = '$valgt_fureso' OR _kommune = '$valgt_egedal' OR _kommune = '$valgt_ballerup' OR _kommune = '$valgt_herlev' OR _kommune = '$valgt_gladsaxe' OR _kommune = '$valgt_lyngby_taarnbaek' OR _kommune = '$valgt_gentofte' OR _kommune = '$valgt_kbh' OR _kommune = '$valgt_frederiksberg' OR _kommune = '$valgt_rodovre' OR _kommune = '$valgt_glostrup' OR _kommune = '$valgt_albertslund' OR _kommune = '$valgt_hoje_taastrup' OR _kommune = '$valgt_ishoj' OR _kommune = '$valgt_bornholm' OR _kommune = '$valgt_vallensbaek' OR _kommune = '$valgt_brondby' OR _kommune = '$valgt_hvidovre' OR _kommune = '$valgt_taarnby' OR _kommune = '$valgt_dragor')
ORDER BY RAND() ";
$result = mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array($result)) {
?>
<table class="table1">
<tr>
<td class="table1_arrangement" colspan="5">
<span class="bold">  <?php echo $row['_arrangement'] ; ?> </span>
</td>
</tr>
<tr>
<td class="table1_beskrivelse" colspan="5">
<?php echo $row['_beskrivelse']; ?>
</td>
</tr>
<tr>
<td class="table1_title-Adresse">
<span class="bold">Adresse:</span>
</td>
<td class="table1_addresse" colspan="2">
<?php echo $row['_adresse']; ?>
</td>
<td rowspan="2">
<a href="http://<?php echo $row['_link']; ?>" target="_blank"><img src="images/asd.png" style="border: none; width: 41px; height: 41px;" /></a>
</td>
<td></td>
</tr>
<tr>
<td class="table1_title-link">
<span class="bold">Link:</span>
</td>
<td class="table1_link" colspan="2">
<a href="http://<?php echo $row['_link']; ?>" target="_blank">
<?php echo $row['_link']; ?>
</a>
</td>
</tr>
<tr>
<td colspan="2">
<div><img class="shit" src="image.php?_nr=<?php echo $row['_nr']; ?>" style="width: 300px; height: 168px;" /></div>
</td>
<td class="table1_image2" colspan="3">
<img src="image_2.php?_nr=<?php echo $row['_nr']; ?>" style="width: 300px; height: 168px;" />
</td>
</tr>
</table>
<table class="table2"></table>
<?php }
?>
It is kinda just copy/paste. Ofcourse i changed it to img.shit in the script. It is like it wont cross files. Sry about me might being noobies here.
Active 3 days ago
OK. Few things here - each time you post your code, you've changed classes, so it's difficult to keep track!
If this is your HTML:
<img class="lort" src="images/grongron_dk.pn
Then you bind an event to an img element with a class of lort:
$("img.lort").click(functi
Your CSS to style that also has to target an img tag with a class of lort. Your CSS currently targets any element with 2 classes: img and lort!
.lort.img { ... } <!-- Wrong! This styles any element containing 2 classes - lort and img
img.lort { ... } <!-- Right! This styles an IMG tag with a class of lort
Because of something called CSS specificity, you will also need to change the CSS rule for zoomed by targetting the img tag as well. Your 2 CSS rules would need to be:
img.lort { ... }
img.zoomed { ... }
I have no idea how your page is built - I can't see how your files: index.php, name.php, global.js and moselort.css interact with each other. If the <img> that you want to toggle is created dynamically (i.e added to the DOM through some javascript after the page is loaded), then you will need to bind the event slightly differently. Instead of this:
If this is your HTML:
<img class="lort" src="images/grongron_dk.pn
Then you bind an event to an img element with a class of lort:
$("img.lort").click(functi
Your CSS to style that also has to target an img tag with a class of lort. Your CSS currently targets any element with 2 classes: img and lort!
.lort.img { ... } <!-- Wrong! This styles any element containing 2 classes - lort and img
img.lort { ... } <!-- Right! This styles an IMG tag with a class of lort
Because of something called CSS specificity, you will also need to change the CSS rule for zoomed by targetting the img tag as well. Your 2 CSS rules would need to be:
img.lort { ... }
img.zoomed { ... }
I have no idea how your page is built - I can't see how your files: index.php, name.php, global.js and moselort.css interact with each other. If the <img> that you want to toggle is created dynamically (i.e added to the DOM through some javascript after the page is loaded), then you will need to bind the event slightly differently. Instead of this:
$("img.lort").click(function(){
$(this).toggleClass("zoomed");
});
$(document).on('click', 'img.lort', function() {
$(this).toggleClass("zoomed");
});
Featured Post
June’s Course of the Month is now available! Experts Exchange’s Premium Members, Team Accounts, and Qualified Experts have access to a complimentary course each month as part of their membership—an extra way to sharpen your skills and increase training.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Nothing in an HTTP request can be trusted, including HTTP headers and form data. A form token is a tool that can be used to guard against request forgeries (CSRF). This article shows an improved approach to form tokens, making it more difficult to…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site.
Launch the Search Engine Menu: In chrome, via you…
Suggested Courses
Course of the Month4 days, 1 hour left to enroll
691 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.